Member Avatar for 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;
}
Edited by Nick Evan because: Fixed formatting
  • 5 Contributors
  • 14 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by shibin vadayatt
Member Avatar for carrieathomer

can you post your html as well

Member Avatar for Birdmanskii

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>

Member Avatar for Birdmanskii

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>

Member Avatar for Dandello

Remember to clear your floats. ;)

Edited by Dandello because: n/a
Member Avatar for shadowcrawler

you may try to add

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

after

<div id="review"></div>
Member Avatar for Birdmanskii

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

Thanks for the responses!

Member Avatar for 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.

Edited by carrieathomer because: n/a
Member Avatar for 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 <div> elements inside. width=750px is not enough I guess.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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>
				<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.

Edited by Dandello because: n/a
Member Avatar for 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!

Member Avatar for 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~~

Member Avatar for shibin vadayatt

the adjust the outer width.."review_container"

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.