Jump to content

Align DIVs next to each other?


grippat

Recommended Posts

That's the way <div>s are supposed to work. Why not try <span> instead?But if you want it to be a block you can apply the CSS property "float: left":<div style="float: left"></div>

Link to comment
Share on other sites

  • 3 weeks later...
That's the way <div>s are supposed to work. Why not try <span> instead?But if you want it to be a block you can apply the CSS property "float: left":<div style="float: left"></div>
Hello, I am using the float attribute at the website i'm working on (Herofox.net). For some reason the background goes away on those divs. Maybe you can take a look at my code and see.
.blocks {float: left;padding: 5px;margin: 13px;width: 140px;height: 250px;background: #e5e5e5;color:#4e4e4e;}

That is the code for the blocks themselves.And this is the code for the entire container.

.content {margin: 0px auto;padding: 8px;text-align: left;background: #f1f1f1;color: #4e4e4e;width: 880px;}

Any help is appreciated thanks very much.

Link to comment
Share on other sites

Add a clearing division after your two floated divisions

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

Link to comment
Share on other sites

  • 2 weeks later...
That's the way <div>s are supposed to work. Why not try <span> instead?But if you want it to be a block you can apply the CSS property "float: left":<div style="float: left"></div>
I have the same problem trying to align the divs horizontally. how can i get the middle div to align centrally? i have used the float property to either side div left and right but the middle drops down onto the next line. the only way i have found to display the div close to how i want it, is to float it left but its not central.
Link to comment
Share on other sites

how can i get the middle div to align centrally?
Try floating it left and apply a margin-left.
Link to comment
Share on other sites

You have your navigation bar widths fixed so this should be pretty easy to do.Copy the code below into a file and view as .html

<html><head><style type="text/css">.row {width:700px;height:40px;background-color:red;}.cell {width:50px;height:100%;float:left;margin-left:75px;background-color:blue;}</style></head><body><div class="row">	<span class="cell"></span>	<span class="cell"></span>	<span class="cell"></span>	<span class="cell"></span>	<span class="cell"></span></div></body></html>

What I did was set the outer container for the links to be the max width (700px). Since there are 5 links. Max width = 700The links are 50px50*5 = 250pxMargin left-over = 450px450/6(margins) = 75px/margin

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...