Float: Left; not working in CSS

Question

Birdmanskii 0 Newbie Poster

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

div dreamweaver float web-design

Edited 11 Years Ago by Nick Evan because: Fixed formatting

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

All 14 Replies

carrieathomer 0 Light Poster

12 Years Ago

can you post your html as well

Dandello 8 Posting Whiz in Training

12 Years Ago

Remember to clear your floats. ;)

Edited 12 Years Ago by Dandello because: n/a

shadowcrawler 0 Newbie Poster

12 Years Ago

you may try to add

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

after

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

carrieathomer 0 Light Poster

12 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 12 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

12 Years Ago

the adjust the outer width.."review_container"

Float: Left; not working in CSS

Recommended Answers Collapse Answers

All 14 Replies

Recommended Answers