in css how to place divs hotizontally next to each other?

sarmenhb · 06-19-2008, 04:24 AM

if you look at this page by microsoft
Windows Vista: Help and How-to

lets imagine each of those icons in that box are divs. how can i arrange divs like that?

thnx

Jim · 06-19-2008, 07:04 AM

You will have to learn positioning. You can position in CSS by using the position, float en just normal elements positioned with just margins or something. It's not something you can just learn or explain in a post. You will have to sit down and take an afternoon to understand some css positioning. :)

Folio · 06-19-2008, 08:25 AM

i'd start with floating them all left then clearing them

div#id{ float: left;}

remember to clear once you are done with the arrangement by using

div#id{ clear: both;}

where 'id' is the id of the div on the page.

Ross · 06-20-2008, 08:16 PM

Here's a demo of what Folio was saying:

HTML Code:

<html>
	<head>
		<style type="text/css">
			.box50 {
				float: left;
				width: 50%;
			}
			
			.red {
				background: #f00;
				height: 100px;
			}
			
			.green {
				background: #0f0;
				height: 400px;
			}
			
			.container {
				clear: both;
			}
		</style>
	</head>
	
	<body>
		<div class="container">
			<div class="box50 red">efsef</div>
			<div class="box50 green">dfsj</div>
		</div>
		
		<p>content below the two boxes</p>
	</body>
</html>

Aaron · 06-21-2008, 04:15 AM

Heres a secret:

Most people will tell you to float both the <div>'s left, and make them 50% width.
Ignore those people. (no offense)

That will give you hours of fun if you don't set margins and padding to 0, and even then, the content is all smushed. Set the left div to float:left, and the right div to float:right. Also, just for kicks, set the width of each to 45%.

Next, don't use two classes, because IE6 loves interpreting two classes the right way.

Also, like Folio said, clear the item directly below the floated <div>s. When you float something, you take it out of the order of the page, like lifting a puzzle peice out of a puzzle. When you add something to the page, it will go below the puzzle peices that you just lifted out, unless you make it clear the puzzle peices. Use clear:both to do so, like Folio said.

As for the nature of your question... Why didn't you just read the source code?

Evulness · 06-23-2008, 02:04 PM

i find it easy, depending on the size of the Div tags. say if your building a horizontal menu system, or you you want 3-4 div blocks across your page to display modules, like you would see on a Gaming clan website.

Use an <UL> list...

Code:

<ul class="horzBlocks">
<li><div class="myblock">My content</div></li>
<li><div class="myblock">My content</div></li>
<li><div class="myblock">My content</div></li>
<li><div class="myblock">My content</div></li>
</ul>

mind you, i'm writing this off the top of my head, but use something like the following css code to make that a flat horizontal list.

Code:

ul.horzBlocks{
display:inline;
margin:2px;
padding2px;
}
div.myBlock{
display:block;
float:left;
clear:both;
}

mind you, i'm most likly missing alot of code in that, but the general idea of what i am saying is there...

either this way, or the above stated floats with containers like redShift stated would work.

depends on your preference, and what your trying to do.

Aaron · 06-23-2008, 04:03 PM

Why not use <a> tags?
Why not style the <li> instead of the <div>?

I hate <div>'s with a passion.

Evulness · 06-23-2008, 05:40 PM

i would agree with that... they are too unpredictable... simple styling, and minor stuff, yea, divs are ok, but i hate having to use divs only in templates.

my current projects menu, at work, is based on styled <li>'s and <a>'s. the CMS system i built for them querys mysql and creates a new <li><a></a></li> for each menu item. its pretty neat, its a classed multi-tier drop menu system. i think i have one menu item that goes 4 layers deep.

I <3 CSS only drop downs. Oh sOo much simpler than dhtml dropdowns, and javascript.

Though he hasn't stated what the divs would be needed for. either way you can still use a styled list to contain the divs, to keep them aligned. I have a template somewhere, based on a multi-tier list. it was pretty neat, i need to dig it up.

CoryMathews · 06-24-2008, 03:43 AM

#box { margin:0; padding:0; width:500px; background:#333; border:#fff 2px solid;}
#box a {padding:4px 3px; margin:0; color:#fff; font-size:12px; width:100px; display:block; float:left;}
#box a:hover {background:#297BA0;}

This will create a box that is 500px wide then you can create 5 links across it. So the html would be.

<div id="box">

<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
<a href="">Link 4</a>
<a href="">Link 5</a>

<a href="">Link 6</a>
<a href="">Link 7</a>
<a href="">Link 8</a>
<a href="">Link 9</a>
<a href="">Link 10</a>
</div>

Tested and works in the latest versions of IE, FF, Opera, Safari