Embedding Divs and Floating them

sab3156

03-08-2008, 05:55 PM

Hey guys.

I am using CSS and div tags to create a layout for a webpage.

It is a 3 column layout with a top banner div and a bottom footer div.

My question is, how can I embed the #articlesnav div and the #librarynav div within the #right div, and have them float to the left within that div?

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

body
{
text-align: center;
}

div#container
{
margin-left: 10px auto;
margin-right: 10px auto;
text-align: left;
}

#top
{
padding: .5em;
background-color: #9FA41D;
border-bottom: 1px solid gray;
text-align: left;
}

#top_banner {
float: left;
padding: 0;
text-align: left;
}

#top h1
{
padding: 0;
margin: 0;
}

#left
{
float: left;
width: 160px;
margin: 0;
}

#navlinks {
width: 160px;
float: left;
margin: 0;
padding: 1em;
}

#right
{
width: 160px;
float: right;
margin: 0;
}

#articlesnav
{
float: left;
width:160px;
margin:0;
}

#librarynav {
width:160px;
float: left;
margin:0;

}

#search {
float: right;
width: 160px;
margin: 0;
padding: 1em ;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #9FA41D;
border-top: 1px solid gray;
}

:confused: When I embed them into the #right div, they are aligned to the right and they flow over the right side of the side, and they have a bit too much margin space to the left... is this the padding of the #right div acting on the embedded divs?

Also, when i do this:

<div id="left">

<div id="navlinks">
<p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Online Library</a></span></p>
<p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Articles</a></span></p>
<p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Forums</a></span></p>
</div>

<p> </p>
</div>

^ the #navlinks div overflows to the left of the #left div. I don't even know if embedding divs is possible... How can I get it so that I can have multiple divs floated to the right, one on top of the other?

Please help!

- sab

Dan Schulz

03-08-2008, 07:19 PM

effpeetee

03-08-2008, 07:54 PM

You are using a class 'navlink' but there is no navlink class in your CSS.

Have a look here.

http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/
Don't forget the DOCTYPE - It's very important.

Frank

sab3156

03-08-2008, 11:30 PM

Hi sab,

Can you show me the full HTML and CSS for this page? I'm noticing a few things that will conflict with what you're trying to do here (such as relying too much on browser defaults and re-styling rules when there's no need to), but if I can see the full page code, I'll definately be able show you how to do what you want while also fixing the other problems as well.

Hey Dan, thanks for your offer to help! Here is the code:

<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">

<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">
<div id="top">
<div id="top_banner"><h2>Banner Here ---- </h2></div>

<div id="search">
search:
</div>

<p> </p>
</div>

<div id="left">

<div id="navlinks">
<p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Online Library</a></span></p>
<p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Articles</a></span></p>
<p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Forums</a></span></p>
</div>

<p> </p>
</div>

<div id="right">
<div id="articlesnav"><h4>Latest Articles:</h4>
<p><img src="img/doublerightarrow.gif"> article article<br>
<img src="img/doublerightarrow.gif"> article article </p></div>

<div id="librarynav"><h4>New Books:</div>

</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore mago eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p> </p>
<h2>Updates:</h2>
<p><i>March 8, 2008</i></p>
<hr width="100" align="left">
<p> </p>

<p> </p>
</div>

<div id="footer">
<center>copyright © ------ 2008</center>
</div>

</body>
</html>

Here is the other CSS style sheet (style.css)

h2
{
color: #B52C07;
font: 120% georgia, times, "times new roman", serif;
font-weight: bold;
margin: 0 0 2px 0;
}

h2 a { text-decoration: none; }

h3
{
color: #5B5E0E;
font: 106% georgia, times, "times new roman", serif;
font-weight: bold;
margin-top: 0;
}

.floatright { float: right; }

.navlink a:link { color: #B52C07; text-decoration: none; font-weight:bold;}
.navlink a:visited { color: #B52C07; text-decoration: none; font-weight:bold;}
.navlink a:active { color: #B52C07; text-decoration: none; font-weight:bold;}
.navlink a:hover { background-color:#FFFF99; text-decoration: none; font-weight:bold;}

.link1 a:link { color:#000099; text-decoration: none; }
.link1 a:visited { color:#000099; text-decoration: none; }
.link1 a:active { color:#000099; text-decoration: none; }
.link1 a:hover { background-color:#FFFF99; text-decoration: underline; }

See, what I'm trying to do is have a 3 Column layout and in the left hand and right hand columns, I want some separate divs, one on top of another, like I kinda did on the right side in the html page...

I would really appreciate it if you could help me with that! Thanks a lot!

- sab

Dan Schulz

03-10-2008, 04:29 AM

Great - I have no idea what size the images are. Can you just toss up a link to the page so I know *exactly* what is going on with everything?

sab3156

03-10-2008, 03:50 PM

Hey Dan,

Unfortunately, I can't put up the site right now... But I can send you the zip file so you can check out the files, if you would like. If you would like to do it that way, please PM me your email address and I'll send the stuff right over.

The images aren't really necessary, so I took them out.

Please let me know if you have any other suggestions.

- sab