Centering inline content with divs??

Discussion in 'Web Design and Development' started by RoboCop001, May 9, 2008.

  1. RoboCop001 macrumors 65816

    Joined:
    Oct 4, 2005
    Location:
    Toronto, Canada
    #1
    I've been trying for a while to figure out how to center content with divs. I tried searching google about tutorials, there's just so much information I don't know where to start or which is the thing I'm looking for!...

    So hopefully someone can shine some light on my problem here....

    Here's my basic page....

    <div> <--container div
    <div>
    logo image goes here
    </div>

    <div>
    advertisement box
    </div>
    </div>


    There's more content to go in the main div, but I don't need to show that here.

    Anyway, those two div tags inside the container div are to be displayed inline, side by side.

    The big div tag is just the container, so I can centre everything and section it off from other sections of the page (this is the top area that contains a logo, advertisement and nav bar)...

    Anyways....

    I got the divs to line up properly. And they are also centred (but to do that I just use a <centre> tag around the div...)

    However, when I make the browser window too narrow, the divs are no longer side by side, the div on the right drops below the div on the left.

    So I tried putting this into the CSS: position:fixed; but that makes the 2 divs hug the left side of the browser window.

    I tried all I know, and I'm still trying to look around for tutorials or whatnot, but there's just so much out there I have no idea where to start.

    Basically all I need is for the 2 div tags to stay side by side, and centered on the page.

    Can anyone help me out? A link to a tutorial, some advice? Anything?

    Thanks so much in advance... this is driving me nuts!
     
  2. MacDonaldsd macrumors 65816

    MacDonaldsd

    Joined:
    Sep 8, 2005
    Location:
    London , UK
    #2
    I think that solves your problem unless I miss understood it, obviously you would change the width, height, color etc.

    Code:
    <html>
    <head>
    	<style type="text/css">
    	
    #div1{
    	float:left;
    	height:50px;
    	background-color:blue;
    	display:block;
    	width:50%;
    
    }
    
    #div2{
    	float:left;
    	height:50px;
    	background-color:pink;
    	display:block;
    	width:50%;
    	
    }
    
    	</style>
    </head>
    <body>	
    <div>
    <div id="div1">
    logo image goes here
    </div>
    
    <div id="div2">
    advertisement box
    </div>
    </div>
    </body>
    </html>
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    In addition to the above post, for the main div you'll want to do margin: 0 auto; in order to center the two divs on the page. This is more important if those two divs inside have less than 50% width.
     
  4. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #4
    Set a fixed width on your container div. That will stop the small browser window from messing with your layout.
     
  5. RoboCop001 thread starter macrumors 65816

    Joined:
    Oct 4, 2005
    Location:
    Toronto, Canada
    #5
    Wow! Thanks for all the responses =)

    I'll be trying this out as soon as I can.

    Let you know how I do!

    Thanks again!:)
     

Share This Page