How Can I Use CSS To Get This Simple Layout Behavior?

Okay I am trying my best to let go of HTML tables and move to the wonderful world of using CSS for layout. I continue to find that, although it may be an archaic way of doing things, most of the time using tables for layout is the quickest and most accurate way for me to get the job done.

Please don't hate, because I want to become more knowledgeable at using CSS!

So in my latest project I have a problem. I have a navigation bar that stretches always accross my page. In that navigation bar I have two primary things: on the left I have a menu section, and on the right I have a login section.

In the past I would have easily implemented the layout with tables, using something like this...

<table cellspacing="0" cellpadding="0" style="width:100%;">
<tr style="background-color: black;">
<td align="left">[stuff for my menu section]</td>
<td align="right">[stuff for my login section]</td>
</tr>
</table>

The end result would be a solid black navigation bar that would contain the stuff for the menu section on the left and the stuff for the login section on the right. Each would sit inside and flush against its respective side of the containing solid black navigation bar. Also, this navigation bar would automatically adjust its height to contain both sections, no matter how tall. Pretty simple stuff, right?

So now I am trying my best to figure out how to do this with CSS. At this point I have only a very crude understanding of how CSS and divs work in layouts.

I started out by making a container div...

<div id="NavigationBar" style="background-color:black;">
</div>

...then I embedded a div for each section...

<div id="NavigationBar" style="background-color:black;">
<div id="MenuSection">
[stuff for menu section]
</div>
<div id="LoginSection">
[stuff for login section]
</div>
</div>

...When I ran the page I quickly noticed the output was quite different than what I expected. It showed my black navigation bar, but it stacked the login section along the left side and just under the menu section.

So after some reading I discovered I should be able to solve the problem by assigning 'float:left' to the menu section div and 'float:right' to the login section div. And so I did.

While this did cause each to appear in the correct location (menu section on the left, login section on the right), it also had an undesirable effect.

Each section, after attachment of the 'float' styles, was no longer contained in the parent div. As a result each no longer contained the background color of the parent.

And so now, while I have a partial solution, I am still left wondering what I should do to continue on and solve this issue.

What I really need is for each section to be *contained* within the parent div and also use its background color, while also aligning properly to the left or right sides of the parent div.

In other words, I want the black background color of the navigation bar to be shown behind my menu and login sections. And if my menu should render at 40 pixels high, 300 pixels high...whatever, the containing parent div should adjust to contain it, just like an HTML table would.

For me, setting 'height' values for the parent div (essentialy in the background) and then using 'float' styles is not a good solution. What if the menu is rendered using a different font and thus changes heights? And even more important, what if a user does not view the page in standard 96DPI mode?

In either case the rendered heights of the menu and login sections could change. If I were using tables this would not be a problem; the table would simply adjust to the needed height, no matter what.

How can I get the same effect when using CSS and divs?

Hello joeypowell,
It sounds like you need to learn about floats. Floating an element is how we put other elements beside it... Have a look at http://css.maxdesign.com.au/floatutorial/

Each section, after attachment of the 'float' styles, was no longer contained in the parent div. As a result each no longer contained the background color of the parent.

That is normal behaviour. You need to clear the floats to make the parent contain them. Have a look at this page explaining how - http://www.quirksmode.org/css/clearing.html



Try your navigation bar something like this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation Bar demo</title>
<style type="text/css">
html, body {
background: #9C9;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
color: #000;
}
* {
margin: 0;
padding: 0;
}
#navigationBar {
width: 100%;
min-width: 900px;
overflow: auto;
text-align: center;
background: #000;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
ul#menu {
width: 450px;
float: left;
list-style: none;
}
ul#menu li {
padding:0 15px;
display:inline;
}
ul#menu li a {color: #fff;}
#navigationBar a:hover, #navigationBar a:active {color: #f00;}
#login {
width: 200px;
float: right;
display: block;
color: #fff;
}
#container {
height: 1000px; /*for demo only*/
width: 900px;
margin: 60px auto;
border: 2px solid #f00;
}
</style>
</head>
<body>
<div id="navigationBar">
<a href="#" id="login">login to Site</a>
<ul id="menu">
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a></li>
<li><a href="#">LINK3</a></li>
</ul>
<!--end navigationBar--></div>
<div id="container">
<h1>Your website goes here</h1>
<!--end container--></div>
</body>
</html>

Well CSS is very useful for web designing. You can find several useful application in CSS and HTML. Recently CS5 and flash 8 is released for better web design.

flash animations (http://www.flashxml.net)

Hello joeypowell,
It sounds like you need to learn about floats. Floating an element is how we put other elements beside it... Have a look at http://css.maxdesign.com.au/floatutorial/



That is normal behaviour. You need to clear the floats to make the parent contain them. Have a look at this page explaining how - http://www.quirksmode.org/css/clearing.html



Try your navigation bar something like this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation Bar demo</title>
<style type="text/css">
html, body {
background: #9C9;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
color: #000;
}
* {
margin: 0;
padding: 0;
}
#navigationBar {
width: 100%;
min-width: 900px;
overflow: auto;
text-align: center;
background: #000;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
ul#menu {
width: 450px;
float: left;
list-style: none;
}
ul#menu li {
padding:0 15px;
display:inline;
}
ul#menu li a {color: #fff;}
#navigationBar a:hover, #navigationBar a:active {color: #f00;}
#login {
width: 200px;
float: right;
display: block;
color: #fff;
}
#container {
height: 1000px; /*for demo only*/
width: 900px;
margin: 60px auto;
border: 2px solid #f00;
}
</style>
</head>
<body>
<div id="navigationBar">
<a href="#" id="login">login to Site</a>
<ul id="menu">
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a></li>
<li><a href="#">LINK3</a></li>
</ul>
<!--end navigationBar--></div>
<div id="container">
<h1>Your website goes here</h1>
<!--end container--></div>
</body>
</html>

Thanks for your help. I spent another hour or so trying to get this right this morning. I finally just decided to use tables. After that I had it working in about a minute. In the future, when I have more time, maybe I can figure this out with CSS. But it seems every time I try to do this the "proper" way, I spend crazy amounts of time just trying to complete what should be very simple tasks.

Thanks for your help. I spent another hour or so trying to get this right this morning. I finally just decided to use tables. After that I had it working in about a minute. In the future, when I have more time, maybe I can figure this out with CSS. But it seems every time I try to do this the "proper" way, I spend crazy amounts of time just trying to complete what should be very simple tasks.
In the mean time, there is much help here. (http://www.exitfegs.co.uk/Sources.html)

Frank.

...When I ran the page I quickly noticed the output was quite different than what I expected. It showed my black navigation bar, but it stacked the login section along the left side and just under the menu section.

Yes, this is because DIV's are block elements (as oppose to inline elements), and block elements always appear on their own line, underneath each other..

The solution to make block elements appear next to each other is to use float:left; as you seem to have found out...

Each section, after attachment of the 'float' styles, was no longer contained in the parent div. As a result each no longer contained the background color of the parent.

Yes this is because the parent sort of doesn't know about it's floated children. But there is a trick around this just add overflow:auto; to the parent container and it will contain its floats. This is a workable solution pretty much all the time...

And well those are your problems sorted, there is no need to set heights on the parent anymore it will contain it's children regardless.

Thanks for your help. I spent another hour or so trying to get this right this morning. I finally just decided to use tables. After that I had it working in about a minute. In the future, when I have more time, maybe I can figure this out with CSS. But it seems every time I try to do this the "proper" way, I spend crazy amounts of time just trying to complete what should be very simple tasks.

:rolleyes: You just need to get down the basics and the concepts on how CSS works, and from there practice makes perfect!!

Thanks for your help. I spent another hour or so trying to get this right this morning. I finally just decided to use tables. After that I had it working in about a minute. In the future, when I have more time, maybe I can figure this out with CSS. But it seems every time I try to do this the "proper" way, I spend crazy amounts of time just trying to complete what should be very simple tasks.

It's just what you know. I've never learned how to do anthing with tables so that same simple task would take me quite a while to do with them.