Alrite, I hope this doesn't confuse anyone. Let me first explain what I am trying to do. It is a pretty complex layout, and could be done through the use of Photoshop much easier, but I want to take on this approach.
I am making a container box, with a left side and a right side. On the right side, it will contain the header, navbar, and content. On the right, I will just have one big picture of my head. lol...you'll see it won't be so bad, I will show post it once completed.
Alright, got what I want to do alright? Good. I created two three main divs, #container, #left (for left box in container), and #right (for left box in container). Within the left div, I have other divs. In the right, I just will be using an image as a background.
Now to the point, I used float:left for the left and right div. However, the right div is just going down.
Here is my HTML source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lorraine Ogan --><-- Welcome To My World</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" />
</head>
<body>
<div id="container">
<div id="left"> <!--BEGINNING OF LEFT BOX-->
<div id="header">
Header...
</div>
<div id="navbar">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.html">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"purpose.html">Purpose</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"jesus">JesusSaves</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">Contact</a></li>
</ul>
<div id="content">
Hello and welcome to my site...
</div>
</div> <!--END OF LEFT CONTENT-->
<div id="right"> <!--RIGHT BOX-->
</div>
</div>
</body>
</html>
--------------------------------------------------
Here is the CSS: (only the important parts)
div#container
{
margin:90px auto;
width:700px;
height:452px;
background-image:
url(images/bg1.gif);
border:3px solid #f9f2f8;
}
div#left
{
float:left;
width:210px;
}
div#right
{
float:left;
width:490px;
background-image:
url(images/bg2.jpg);
}
--------------------------------------------------
So what seems to be the problem? I'm ready!Okay, so you have one gigantic box with two smaller boxes inside of it and you want them to be more or less side by side? (Or at least horizontally aligned)?
Okay, if you want the left div to be far left, the right div to be right, and nothing in between...
Increase the width of the main div by about 5 px or decrease the width of the inner divs by about 1-2px apiece.
If you want the left div to be far left, the right div to be far right, and have the possibility for things to be in between...
Set the left div to float left, the right div to float right, AND: either increase the size of the main div AND/OR decrease the size of both inner divs.
Does this help?I understand what you are saying but I think that I am trying to be a little too complex. I think to do what I want to do will require more designing skills then just CSS, therefore, I am going to delve into the world of Flash MX!
Thanks for your help, though!"When programming HTML, think in terms of layers. When programming JavaScript think in terms of functions." --Ultimater
You should be specific with all your layer placements. Use % 's instead of float.
example:
position: relative;
left: -20%;
top: 31%;
I am making a container box, with a left side and a right side. On the right side, it will contain the header, navbar, and content. On the right, I will just have one big picture of my head. lol...you'll see it won't be so bad, I will show post it once completed.
Alright, got what I want to do alright? Good. I created two three main divs, #container, #left (for left box in container), and #right (for left box in container). Within the left div, I have other divs. In the right, I just will be using an image as a background.
Now to the point, I used float:left for the left and right div. However, the right div is just going down.
Here is my HTML source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lorraine Ogan --><-- Welcome To My World</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" />
</head>
<body>
<div id="container">
<div id="left"> <!--BEGINNING OF LEFT BOX-->
<div id="header">
Header...
</div>
<div id="navbar">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.html">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"purpose.html">Purpose</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"jesus">JesusSaves</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">Contact</a></li>
</ul>
<div id="content">
Hello and welcome to my site...
</div>
</div> <!--END OF LEFT CONTENT-->
<div id="right"> <!--RIGHT BOX-->
</div>
</div>
</body>
</html>
--------------------------------------------------
Here is the CSS: (only the important parts)
div#container
{
margin:90px auto;
width:700px;
height:452px;
background-image:
url(images/bg1.gif);
border:3px solid #f9f2f8;
}
div#left
{
float:left;
width:210px;
}
div#right
{
float:left;
width:490px;
background-image:
url(images/bg2.jpg);
}
--------------------------------------------------
So what seems to be the problem? I'm ready!Okay, so you have one gigantic box with two smaller boxes inside of it and you want them to be more or less side by side? (Or at least horizontally aligned)?
Okay, if you want the left div to be far left, the right div to be right, and nothing in between...
Increase the width of the main div by about 5 px or decrease the width of the inner divs by about 1-2px apiece.
If you want the left div to be far left, the right div to be far right, and have the possibility for things to be in between...
Set the left div to float left, the right div to float right, AND: either increase the size of the main div AND/OR decrease the size of both inner divs.
Does this help?I understand what you are saying but I think that I am trying to be a little too complex. I think to do what I want to do will require more designing skills then just CSS, therefore, I am going to delve into the world of Flash MX!
Thanks for your help, though!"When programming HTML, think in terms of layers. When programming JavaScript think in terms of functions." --Ultimater
You should be specific with all your layer placements. Use % 's instead of float.
example:
position: relative;
left: -20%;
top: 31%;