Results 1 to 8 of 8

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

  1. #1
    Join Date
    Aug 2006
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,364
    Thanks
    31
    Thanked 140 Times in 135 Posts
    Blog Entries
    32

    Default

    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.
    Last edited by molendijk; 07-17-2008 at 09:25 AM. Reason: Correction

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Quote Originally Posted by molendijk View Post
    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.
    Last edited by codeexploiter; 07-17-2008 at 09:39 AM. Reason: Corrections

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,364
    Thanks
    31
    Thanked 140 Times in 135 Posts
    Blog Entries
    32

    Default

    Quote Originally Posted by codeexploiter View Post
    [...]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.

  6. #6
    Join Date
    Aug 2006
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks all
    why wont this work for me?

    Code:
    <div style="display:inline;">
    can the first div not have the inline specified?
    Last edited by chas; 07-17-2008 at 05:28 PM.

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,364
    Thanks
    31
    Thanked 140 Times in 135 Posts
    Blog Entries
    32

    Default

    Quote Originally Posted by chas View Post
    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.

  8. #8
    Join Date
    Aug 2006
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •