Lining DIVs side-by-side and one over the other

**chas** · 07-17-2008, 07:24 AM

Lining DIVs side-by-side and one over the other

1. How do i align DIVs on the same horizontal level, side by side

2. How to overlay one over the top of the other

**codeexploiter** · 07-17-2008, 08:37 AM

For that purpose you have to use CSS Positioning techniques. Here is one example that shows side by side div blocks (div 1 and div 2) overlapped divs (div 3 and div 4)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Untitled Document</title>
		<style type="text/css">
		#main{
			position:static;
			top:0;
			left:0;
		}
		#one{
			position:absolute;
			top:1px;
			left:0;
			width:100px;
			height:100px;
			border:1px solid red;
			background-color:#000;
			color:#fff;
		}
		#two{
			position:absolute;
			top:1px;
			left:105px;
			width:100px;
			height:100px;
			border:1px solid yellow;
			background-color:blue;
		}
		#three{
			position:absolute;
			top:1px;
			left:210px;
			width:100px;
			height:100px;
			border:1px solid green;
			background-color:red;
			/*z-index:10;*/
		}
		#four{
			position:absolute;
			top:20px;
			left:240px;
			width:100px;
			height:100px;
			border:1px solid blue;
			background-color:gray;			
		}
		
		</style>
		<script type="text/javascript">

		</script>
	</head>
	<body>
		<div id="main">
			<div id="one">Div 1</div>
			<div id="two">Div 2</div>
			<div id="three">Div 3</div>
			<div id="four">Div 4</div>
		</div>
	</body>
</html>

Just copy and save the source in a .htm/.html file and open it in your browser. After the first loading try to uncomment the following line associated to #three CSS definition:

Code:

/*z-index:10;*/

Save it and reload the page and see the effect.

The following link explains the positioning techniques in a simple manner:

http://www.barelyfitz.com/screencast...s/positioning/

Hope this helps

**molendijk** · 07-17-2008, 09:16 AM

You can do it just using 'position: relative' (and 'z-index'). For example:

Code:

<head>
<style>
div.inline1{position:relative; display:inline; background:red; border:1px solid black; margin:0; padding:20px}
div.inline2{position:relative; display:inline; left:-23px; top:16px; background:lightyellow; border:1px solid black; z-index:2; margin:0; padding:20px}
div.inline3{position:relative; display:inline; left:-43px; top:20px; background:#dedede; border:1px solid black; z-index:1; margin:0; padding: 20px}
</style>
</head>

<body>

<div class="inline1">div1</div>
<div class="inline2">div2</div>
<div class="inline3">div3</div>

</body>

The key-feature is display: inline.
This could be shorter, but it'll give you the general idea.
===
Arie Molendijk.

**codeexploiter** · 07-17-2008, 09:34 AM

Originally Posted by molendijk

You can do it just using 'position: relative' (and 'z-index'). For example:

Code:

<head>
<style>
div.inline1{position:relative; display:inline; background:red; border:1px solid black; margin:0; padding:20px}
div.inline2{position:relative; display:inline; left:-23px; top:16px; background:lightyellow; border:1px solid black; z-index:2; margin:0; padding:20px}
div.inline3{position:relative; display:inline; left:-43px; top:20px; background:#dedede; border:1px solid black; z-index:1; margin:0; padding: 20px}
</style>
</head>

<body>

<div class="inline1">div1</div>
<div class="inline2">div2</div>
<div class="inline3">div3</div>

</body>

The key-feature is display: inline.
This could be shorter, but it'll give you the general idea.
===
Arie Molendijk.

You can't set a width and height for an inline element. So if you convert the display mode of a block level element to inline though you can achieve the side by side/overlapping effects but you will not be able to set a height or width on it. The content inside the inline element will determine the width of the element as a result the developer may not be able to control the element look as (s)he wants.

**molendijk** · 07-17-2008, 12:33 PM

Originally Posted by codeexploiter

[...]if you convert the display mode of a block level element to inline though you can achieve the side by side/overlapping effects but you will not be able to set a height or width on it.

Codeexploiter, that's true, but I thought the question was primarily about 'side by side' and 'overlay', not about size. I had size in my mind, though, which is why I added paddings for the divs. Paddings can mimic size.
===
Arie.

**chas** · 07-17-2008, 05:11 PM

thanks all
why wont this work for me?

Code:

<div style="display:inline;">

can the first div not have the inline specified?

**molendijk** · 07-17-2008, 05:55 PM

Originally Posted by chas

thanks all
why wont this work for me?

Code:

<div style="display:inline;">

can the first div not have the inline specified?

That should work. I tried this:<div style="display:inline;">inline1</div><a>text</a> which produced inline1 text (as expected), meaning that the div has 'inline' (if not, we would get:
inline1
text).
===
Arie.

**chas** · 07-31-2008, 05:16 AM

oh i need to align 2-3 divs inline !!

not working here

http://adultsonly.kicks-ass.net/seo/...hp?showforum=2

marquee should be sliding one table in a div after another

Thread: Lining DIVs side-by-side and one over the other

Thread Tools

Search Thread

Lining DIVs side-by-side and one over the other

Bookmarks

Bookmarks

Posting Permissions