Float: Left; not working in CSS

Question

Birdmanskii 0 Newbie Poster

14 Years Ago

The #review section won't float left in Dreamweaver.

For some reason when I use the float: left; command, the #review div stays underneath the #band_links div. I want #review to line up on the right side of the #share, #tracklist, and #band_links divs. I've tried everything I can think of but nothing has worked so far.

Thanks in advanced!

Here's the CSS I'm using:

#review_container {
    padding-top: 1px;
    width: 750px;
    height: auto;
    margin-left: 100px;
    outline-style: solid;
    outline-color: #E0E0E9;
    outline-width: 1px;
    background-color: white;
}

#review_pic {
    width: 200px;
    height: 150px;  
    margin-left: 5px;
    float: left;
}

#review_info {
    width: 500px;
    height: auto;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    text-indent: 225px;
    color: #B6B3B3;
}

#band_info {
    width: 500px;
    height: auto;
    margin-left: 20px;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    color: #B6B3B3;
}

#share {
    margin-left: 5px;
    margin-top: 175px;
    width: 200px;
    height: auto;
    outline-style: solid;
    outline-color: #E0E0E9;
    outline-width: 1px;
}

#tracklist {
    margin-left: 5px;
    margin-top: 5px;
    width: 200px;
    height: auto;
    outline-style: solid;
    outline-color: #E0E0E9;
    outline-width: 1px;
    color: #B6B3B3;
    font-size: 14px;
}

#band_links {
    margin-left: 5px;
    margin-top: 5px;
    width: 200px;
    height: auto;
    outline-style: solid;
    outline-color: #E0E0E9;
    outline-width: 1px;
    color: #B6B3B3;
}

#review {
    margin-left: 210px;
    margin-top: 5px;
    padding-left: 5px;
    width: 500px;
    height: auto;
    outline-style: solid;
    outline-color: #E0E0E9;
    outline-width: 1px;
        float: left;
}

html-css web-design

Edited 13 Years Ago by Nick Evan because: Fixed formatting

5 Contributors
14 Replies
1K Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by shibin vadayatt

Dani AI

Generated 10 Months Ago

The reason #review sits under #band_links is that only one side of your layout is floated. Blocks that are not floated (#share, #tracklist, #band_links) stack in normal flow and occupy the left edge. A lone float on the right tries to move up, but it can only sit beside a float or a line where there is enough horizontal space. With a tall stack on the left, that space does not exist until after #band_links, so the right column drops. ’s suggestion to create two columns and clear above them is the right mental model; and were also pointing you there.

Two quick, reliable patterns you can drop in:

Float-based two-column wrapper (classic)

HTML

<div class="columns">
  <aside class="left-col">share + tracklist + links</aside>
  <section class="right-col">review</section>
</div>

CSS

.columns::after { content: ""; display: table; clear: both; }  /* clearfix */
.left-col  { float: left;  width: 210px; }
.right-col { float: left;  width: 520px; }  /* 210 + 520 + gaps <= container */

Flexbox (simpler, modern)

.columns { display: flex; gap: 10px; }
.left-col  { flex: 0 0 210px; }
.right-col { flex: 1 1 auto; min-width: 0; }

A few tips while you refactor:

Clear the header floats (pic/info) before starting the two columns. A clearfix on the wrapper avoids extra empty markup, unlike the clear:both shim mentioned earlier.
Avoid large magic margins to push boxes around; let the columns handle placement.
When checking widths, include margins and padding as and noted. Borders add to box width; outlines do not. If you add borders later, consider box-sizing:border-box.
Absolute positioning (which you mentioned, ) can work short-term, but it is brittle and will fight with responsive layouts. Prefer the two-column wrapper instead.

All 14 Replies

carrieathomer 0 Light Poster

14 Years Ago

can you post your html as well

Dandello 8 Posting Whiz in Training

14 Years Ago

Remember to clear your floats. ;)

Edited 14 Years Ago by Dandello because: n/a

shadowcrawler 0 Newbie Poster

14 Years Ago

you may try to add

<div style="clear:both"></div>

after

<div id="review"></div>

carrieathomer 0 Light Poster

14 Years Ago

Ok this only a fix. But you have to totally change your css

For now wrap a div around tracklist and links, with following styles

<div style="clear:both;float:left">
<div id="tracklist">
Tracklist:

</div>
<div id="band_links">
Links
</div>
</div>
<div id="review">
<p style="margin: 0px; text-indent: 50px">Review</p>


</div>

in the css remove the margin left 210 px of review div

#review {
margin-left: 0px;
margin-top: 5px;
padding-left: 5px;
width: 500px;
height: auto;
outline-style: solid;
outline-color: #E0E0E9;
outline-width: 1px;
float: left;
}

just see the output.

But you have totally cleanup CSS. That is my sincere advice.

Edited 14 Years Ago by carrieathomer because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Birdmanskii 0 Newbie Poster · Answer 1 · 2011-10-24T04:17:50+00:00

This is the HTML:

<div id="review_container">
<div id="review_pic">
<p><img src="IslandTigers.jpg" width="200" height="155" alt="Island Tigers" /></p>
</div>
<div id="review_info">
<h1 style="margin: 0px;">All's Fair & Warfare</h1>
<h3 style="margin: 0px;"> by Island Tigers</h3>
<p style="margin: 0px;" > Genre: Indie </p>
</div>
<div id="band_info">
<p style="margin: 0px;" > Island Tigers are a two piece band hailing from Massachusetts who play a style of Indie Rock that has been compared to the likes of Radiohead and The White Stripes. </p>
</div>
<div id="share">
Facebook
Twitter
</div>

<div id="tracklist">
Tracklist:
<br />1. What's the Use?
<br />2. The Chandelier
<br />3. OBJECTS IN MIRROR ARE LARGER THAN THEY APPEAR
<br />4. Bad Friend
<br />5. The Bogs
<br />6. f I Can't Forget
<br />7. The Right Words
<br />8. Keep in Touch
<br />9. Sourtooth
<br />10.13th Homesick Waltz (For Shore St.)
</div>
<div id="band_links">
Links
</div>
<div id="review">
<p style="margin: 0px; text-indent: 50px">Review</p>

<br />-Jordan Serrano
<br /> Bandstand Magazine
</div>
</div>

Birdmanskii 0 Newbie Poster · Answer 2 · 2011-10-24T04:20:25+00:00

Sorry, this is the HTML without all the clutter

<div id="review_container">
<div id="review_pic">
<p><img src="IslandTigers.jpg" width="200" height="155" alt="Island Tigers" /></p>
</div>
<div id="review_info">
<h1 style="margin: 0px;">All's Fair & Warfare</h1>
<h3 style="margin: 0px;"> by Island Tigers</h3>
<p style="margin: 0px;" > Genre: Indie </p>
</div>
<div id="band_info">

</div>
<div id="share">

</div>

<div id="tracklist">
Tracklist:

</div>
<div id="band_links">
Links
</div>
<div id="review">
<p style="margin: 0px; text-indent: 50px">Review</p>

</div>
</div>

Birdmanskii 0 Newbie Poster · Answer 3 · 2011-10-24T08:03:55+00:00

I cleared my floats and it's still not working. Any other suggestions?

Thanks for the responses!

shadowcrawler 0 Newbie Poster · Answer 4 · 2011-10-24T09:08:16+00:00

I cleared my floats and it's still not working. Any other suggestions?
Thanks for the responses!

i think the problem might be the width. You must make sure that the width of the review_container should be larger than the sum of width of all the <div> elements inside. width=750px is not enough I guess.

Dandello 8 Posting Whiz in Training · Answer 5 · 2011-10-24T20:17:21+00:00

When calculating the widths, remember to include the margins. The outer container needs to be at least a few px wider that the total widths of the inner containers.

Birdmanskii 0 Newbie Poster · Answer 6 · 2011-10-24T21:46:24+00:00

So far I haven't been able to get any of these solutions to work for me. I'm still very new to all of this. I tried to put a container around the tracklist and links like carrieathomer said but couldn't get it to fix the float issue.

Still unsolved, any more help would be greatly appreciated.

Dandello 8 Posting Whiz in Training · Answer 7 · 2011-10-24T22:30:28+00:00

#review_container {
padding-top: 1px;
width: 750px;
margin-left: 100px;
outline-style: solid;
outline-color: #E0E0E9;
outline-width: 1px;
background-color: white;
}

#review_pic {
width: 200px;
height: 150px;
margin-left: 5px;
float: left;
}

#review_info {
width: 500px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 10px;
float: left;
font-family: Arial, Helvetica, sans-serif;
text-indent: 225px;
color: #B6B3B3;
}

#band_info {
width: 500px;
margin-left: 20px;
float: left;
font-family: Arial, Helvetica, sans-serif;
color: #B6B3B3;
}

#share {
margin-left: 5px;
width: 200px;
outline-style: solid;
outline-color: #E0E0E9;
outline-width: 1px;
}

#tracklist {
margin-left: 5px;
margin-top: 5px;
width: 200px;
outline-style: solid;
outline-color: #E0E0E9;
outline-width: 1px;
color: #B6B3B3;
font-size: 14px;
}

#band_links {
margin-left: 5px;
margin-top: 5px;
width: 200px;
height: auto;
outline-style: solid;
outline-color: #E0E0E9;
outline-width: 1px;
color: #B6B3B3;
}

#review {
margin-top: 5px;
padding-left: 5px;
width: 500px;
height: auto;
outline-style: solid;
outline-color: #E0E0E9;
outline-width: 1px;
float: left;
}

<!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' xml:lang='en' lang='en'>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="review.css" />
</head>
<body>
<div id="review_container">
	<div id="review_pic">
		<p><img src="IslandTigers.jpg" width="200" height="155" alt="Island Tigers" /></p>
	</div>
	<div id="review_info">
		<h1 style="margin: 0px;">All's Fair &amp; Warfare</h1>
		<h3 style="margin: 0px;"> by Island Tigers</h3>
		<p style="margin: 0px;"> Genre: Indie </p>
	</div>
	<div style='clear:both'></div>
		<div id='column-right' style='float:right; width:540px'>
	<div id="band_info">
		<p style="margin: 0px;"> Island Tigers are a two piece band hailing from Massachusetts who play a style of Indie Rock that has been compared to the likes of Radiohead and The White Stripes. </p>
	</div>
			<div id="review">
				<p style="margin: 0px; text-indent: 50px">Review</p>
				<br />-Jordan Serrano
				<br /> Bandstand Magazine
			</div>
		</div>
	<div id='column-left' style='float:left; width:205px'>
		<div id="share">
			Facebook
			Twitter
		</div>
		<div id="tracklist">
			Tracklist:
			<br />1. What's the Use?
			<br />2. The Chandelier
			<br />3. OBJECTS IN MIRROR ARE LARGER THAN THEY APPEAR
			<br />4. Bad Friend
			<br />5. The Bogs
			<br />6. f I Can't Forget
			<br />7. The Right Words
			<br />8. Keep in Touch
			<br />9. Sourtooth
			<br />10.13th Homesick Waltz (For Shore St.)
		</div>
		<div id="band_links">
			Links
		</div>
	</div>
	</div>
</body>
</html>

First - remove the top margins you were using to force things down.
Second, clear the divs before the section where you want the two columns. Place the sections that are supposed to be one above the other in COLUMNS and float the columns right and left.

Birdmanskii 0 Newbie Poster · Answer 8 · 2011-10-25T00:58:22+00:00

Thanks Dandello, that was super helpful. I ended up making the left-column, like you said and positioning it relative and positioning the review_container absolute so the column would appear over-top the review_container.

Thank you everyone! Finally solved!

shadowcrawler 0 Newbie Poster · Answer 9 · 2011-10-25T03:59:01+00:00

When calculating the widths, remember to include the margins. The outer container needs to be at least a few px wider that the total widths of the inner containers.

And also padding~~

shibin vadayatt 0 Newbie Poster · Answer 10 · 2011-10-25T13:58:15+00:00

shibin vadayatt 0 Newbie Poster

14 Years Ago

the adjust the outer width.."review_container"

Float: Left; not working in CSS

Dani AI

Recommended Answers Collapse Answers

All 14 Replies

Recommended Answers