Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Centering inline content with divs??

R

RoboCop001

macrumors 68000
Original poster
Oct 4, 2005
1,561
451
Toronto, Canada
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!
 
MacDonaldsd

MacDonaldsd

macrumors 65816
Sep 8, 2005
1,005
0
London , UK
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>
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom