CSS: Float.

Mikeybob

Hi everyone,

I'm having some trouble with my page. Basically, it has three main divs. A banner at the top, navigation along the left side and the content to the right of the navigation. The banner is in it's own wrapper (container) div, and so is the navigation and content. There is a main wrapper containing it all.

The problem is that the navigation div is floated left, and the content right. However, the main wrapper height need to change to the height of the navigation or content (whichever is largest) so it contains it all.

I've found out floating divs are placed out of sync with the main flow, so the main wrapper is totally unaffected, and the content wrapper is always 0px high.

This is more or less how it's designed:



This is more or less how it looks:



Any help would be awesome. Thanks .

RWB

Post up some code

Mikeybob

HTML:

[HTML] <div id="main_wrapper">
<div id="banner_wrapper">
<img src="images/banner/banner.jpg" alt="">
</div>
<div id="content_wrapper">
<div id="navigation_wrapper">
<div id="navigation_set">
1234
</div>
</div>
<div id="article_wrapper">
<div class="article_set">
1234
</div>
</div>
</div>
</div>[/HTML]

The CSS is:

.article_set {
	width:100%;
	height:292px;
	border: 1px solid #000;
}

#article_wrapper {
	width:562px;
	position: static;
	float:right;
}

#banner_wrapper {
	width:100%;
	height:55px;
	position:static;
}

#banner_wrapper img {
	float:right;
}

#content_wrapper {
	width:800px;
	height:auto;
	border:1px solid #333;
	position:static;
}

#main_wrapper {
	width:800px;
	background-color:#FFF;
	border: 1px solid #000;
	margin-right:auto;
	margin-left:auto;
	position:static;
}

#navigation_set {
	background-image: url(../images/navigation/background.jpg);
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}

#navigation_wrapper {
	width:200px;
	height:auto;
	float:left;
	position:static;
}

#page_layout {
	background-color: #CCC;
	margin: 0px;
	padding: 0px;
}

Thanks again

RWB

Sorry to be slow... I am at work while doing all this... your HTML is not showng up...

err wait sorry I just caught the second post, dnno howw I missed it... haha

Mikeybob

Heh, no probs . I think I missed up on the post. I couldn't find the delete button so I thought I'd just ignore it. Maybe it'll go away.

Thanks for the help anyway .

Linc

First, you don't need to set the nav to float left AND the content to float right - pick one (whichever is first in the HTML - in this case the nav). That's unrelated to the problem, but it's a habit worth breaking lest it get you in trouble later.

Second, create a "footer" div (empty if you like) just before the close of the outer wrapper. Set it to "clear:both;". That will cause it to appear BELOW all the floats above, stretching its container down below everything else.

Mikeybob

Genius! Thanks! Is there any reason for the navigation div to float instead of the content other than it just appearing first in the HTML?

[edit]

This is going to sound like a silly question, but I'm assuming I position whichever div isn't floating using padding.

Linc

"Float" means that it will let whatever comes after it wrap around it. So, floating the nav means the content can drift up beside it. Letting the content "float" does... nothing. (Except add markup and potentially confuse matters later ).

If you're using relative positioning, then yes, you'd use margin and padding to position/space the elements.

Mikeybob

I've tried just setting the navigation to float and leaving the content, and it just sits underneath the navigation. left/right positioning doesn't do a lot either, so I guess it's just padding, right?

[edit]

I tell a lie. The navigation just sits ontop, as if it's higher on the Z axis.

Linc

You have the width of main set to 800px, while content is 800px and nav is 200px. Since nav and content exceed the width of main, the content is bumped to a new line rather than floating beside nav as it should.

Also, remove "position: static;" everywhere it appears in your CSS. It's redundant to declare that without reason.

Mikeybob

The text in the content divs wrap around the navigation, but the div itself is partially hidden by the navigation. Is that normal?

Linc

Yeah, that'll happen. Jack up the left-margin on the content div.

Mikeybob

Thanks for all the help. It now works bew-tee-flee! .

On a similar note; I tried the same technique on another div that's inside the content div. It works in a similar way; four divs: -

Content wrapper: same as before,
Article header (at the top)
Article content (underneath the header and float:left)
Article features (to the right of article content and bumped across by the margin),
Article footer (sits below the content and footer),
Article set (works as a wrapper for the previous four divs).

FF loves it, and it displays fine. IE, on the other hand, sketches out and sticks the features div under the content div (still bumped across by margin).

Mathematically, it should all fit together. I even tried shrinking the content div in case the divs' widths were too wide added together.

Codage:

[HTML]
<body id="page_layout">
<div id="main_wrapper">
<div id="banner_wrapper">
<img src="images/banner/banner.jpg" alt="">
</div>
<div id="content_wrapper">
<div id="navigation_wrapper">
<div id="navigation_heading">
<h1>Projects</h1>
</div>
<div id="navigation_menu">
<ul>
<li><a href="navigation_link">Link</a></li>
</ul>
</div>
</div>
<div id="article_wrapper">
<div class="article_set">
<div class="article_heading">
<h1>Article Title</h1>
<a name="anchor_ID"></a> </div>
<div class="article_content"><a href="image_link"><img src="image_src" alt=""></a>
</div>
<div class="article_features">
<h1>Features:</h1>
<ul>
<li>feature 1</li>
</ul>
</div>
</div>
<div class="article_footer">
<ul>
<li><span class="article_footer_header">Media:</span><span class="article_footer_subtext">123</span></li>
<li><span class="article_footer_header">Date:</span><span class="article_footer_subtext">123</span></li>
</ul>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
[/HTML]

.article_content {
	width:350px;
	height:264px;
	border-right:1px solid #000;
	float:left;
}

.article_content img {
	width:350px;
	height:264px;
	text-decoration:none;
}

.article_features {
	width:185px;
	height:265px;
	background-color:#333;
	margin-left:380px;
}

.article_features h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFF;
	padding:6px;
	margin:0px;
}

.article_features ul {
	padding-left:15px;
	margin:6px;
}

.article_features ul li {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFF;
	padding-bottom:4px;
}

.article_heading {
	height:28px;
	background-color:#CC00CC;
	padding:0px;
	margin:0px;
	border-bottom:1px solid #000;
}

.article_heading h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#FFF;
	padding:5px;
	margin:0px;
}

.article_footer {
	height:28px;
	background-color:#000;
}

.article_footer ul {
	list-style:none;
	padding:0px;
	margin:0px;
}

.article_footer ul li {
	display:inline;
	margin:0px;
	padding:0px;
}

.article_footer_header {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	margin:0px;
	padding:0px;
}

.article_footer_subtext {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFF;
	margin:0px;
	padding:0px;
}

.article_set {
	width:100%;
	height:292px;
	border: 1px solid #000;
	background-color:#CCC;
}

#article_wrapper {
	width:565px;
	margin-left:225px;
}

#banner_wrapper {
	width:100%;
	height:55px;
	margin-top:22px;
	margin-bottom:22px;
}

#banner_wrapper img {
	float:right;
	padding-right:15px;
}

#content_wrapper {
	width:100%;
}

#footer {
	clear:both;
}

#main_wrapper {
	width:800px;
	background-color:#FFF;
	border: 1px solid #000;
	margin-right:auto;
	margin-left:auto;
}

#navigation_heading {
	height:28px;
	padding:5px;
	}

#navigation_heading h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#FFF;
	margin:0px;
	padding: 0px;
}

#navigation_menu {
	width:100%;
}

#navigation_menu ul {
	list-style:none;
	margin: 0px;
	padding:0px;
}

#navigation_menu ul li {
	width:100%;
	border-top: 1px solid #000;
}

#navigation_menu ul li a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFF;
	text-decoration:none;
	margin:4px;
}

#navigation_menu ul li a:hover {
	text-decoration:underline;
}

#navigation_wrapper {
	width:200px;
	background-image: url(../images/navigation/background.jpg);
	background-repeat: repeat-x;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	float:left;
}

#page_layout {
	background-color: #CCC;
	margin: 0px;
	padding: 0px;
}

Thanks again.

P.S. Is span still used?

jared

Yes you can still use span for formatting however it isn't used too much usually