Float: Left; not working in CSS

[Birdmanskii]

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;
}

[carrieathomer]

can you post your html as well

[Birdmanskii]

This is the HTML:

All's Fair & Warfare
by Island Tigers
Genre: Indie

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.

Facebook
Twitter

Tracklist:

1. What's the Use?

2. The Chandelier

3. OBJECTS IN MIRROR ARE LARGER THAN THEY APPEAR

4. Bad Friend

5. The Bogs

6. f I Can't Forget

7. The Right Words

8. Keep in Touch

9. Sourtooth

10.13th Homesick Waltz (For Shore St.)


Links


Review

-Jordan Serrano

Bandstand Magazine

[Birdmanskii]

Sorry, this is the HTML without all the clutter

All's Fair & Warfare
by Island Tigers
Genre: Indie

Tracklist:

Links


Review

[Dandello]

Remember to clear your floats. ;)

[shadowcrawler]

you may try to add

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

after

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

[Birdmanskii]

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

Thanks for the responses!

[carrieathomer]

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.

[shadowcrawler]

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 elements inside. width=750px is not enough I guess.

[Dandello]

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]

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]

#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>
				-Jordan Serrano
				 Bandstand Magazine
			</div>
		</div>
	<div id='column-left' style='float:left; width:205px'>
		<div id="share">
			Facebook
			Twitter
		</div>
		<div id="tracklist">
			Tracklist:
			1. What's the Use?
			2. The Chandelier
			3. OBJECTS IN MIRROR ARE LARGER THAN THEY APPEAR
			4. Bad Friend
			5. The Bogs
			6. f I Can't Forget
			7. The Right Words
			8. Keep in Touch
			9. Sourtooth
			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]

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]

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]

the adjust the outer width.."review_container"