How to center content within a div

@Albert1955May 19.2008

hey guys
just trying to work out how to center content contained in a div ?
Have a look at this trial site at
~~[URL=”http://pozhet.spandog.com/apozhet/index.html”]~~http://pozhet.spandog.com/apozhet/index.html[/URL]

I’m talking about the lower four color block images, I want them to be centered within 760px wide “#~~[COLOR=”Red”]~~~~[B]~~lowerbodywrapper[/B][/COLOR]” rather than to the left

relevant css is
……
/*—-BODYLOWERFOUR—-*/
~~[COLOR=”red”]~~~~[B]~~#bodylowerwrapper[/B][/COLOR]{width:100%; background:#F7FBF7; color:#8D8D8D; float:left; padding:20px 0 0; clear:both;}
#bodylowerfour{width:760px; position:relative; margin:0 auto 0 auto; background:#F7FBF7; color:#8D8D8D;}

/*—FOUR PANEL ONE—-*/
#lowerfourone{width:187px; float:left; color:#006600;}
#lowerfourone p{padding:0 0 20px 0;}
#lowerfourone p.boldtext{font-size:16px; background:#F7FBF7; color:#006600; font-weight:bold; padding:32px 0 0;}
#lowerfourone p.blacktext{background:#F7FBF7; color:#006600; padding:0 0 12px 0;}
#lowerfourone p.dotline{background:url(images/dot.line.gif) 0 0 repeat-x; width:156px; padding:0 0 12px 0;}

#lowerfourone p.more{margin:0 0 10px 0px; padding:0px;}
#lowerfourone p.more a{display:block;width:79px; height:28px; background:url(images/greenarrow.gif) 0 0 no-repeat #F7FBF7; color:#006600; font-size:15px; line-height:28px; text-decoration:none; padding:0 0 0 10px;}
#lowerfourone p.more a:hover{background:url(images/greenarrow2.gif) 0 0 no-repeat #F7FBF7; color:#111; text-decoration:none;}

#lowerfourone ul{width:156px; padding:0 0 20px 0;}
#lowerfourone ul li{width:156px; height:20px;}
#lowerfourone ul li a{width:140px; height:20px; background:url(images/arrow1.gif) 0 8px no-repeat #F7FBF7; color:#006600; line-height:20px; text-decoration:underline; padding:0 0 0 16px;}
#lowerfourone ul li a:hover{background:url(images/arrow2.gif) 0 8px no-repeat #F7FBF7; color:#006600; text-decoration:underline;}

#lowerfourone ul.block{width:156px; height:151px; display:block; padding:0px;}
#lowerfourone ul.block li{width:156px; height:151px;}
#lowerfourone ul.block li a{width:126px; height:128px; display:block; background:url(images/block1.png) 0 0 no-repeat #FCFCFC; color:#F7FBF7; font-size:20px; font-weight:bold; text-decoration:none; padding:23px 0 0 30px;}
#lowerfourone ul.block li a:hover{background:url(images/block1.png) 0 0 no-repeat #FCFCFC; color:#F7FBF7; text-decoration:none;}

/*—/FOUR PANEL ONE—-*/

/*—FOUR PANEL TWO—-*/
#lowerfourtwo{width:186px; float:left;
………
and same as the above *FourPanel One*

full css file is at ~~[url]~~http://pozhet.spandog.com/apozhet/twothirds.css[/url]

if any one can help with this I will be thankful

Albert:eek:

to post a comment

CSS

3 Comments(s) _↴

@WebJoelMay 19.2008 — #[COLOR=red][B]#bodylowerwrapper[/B][/COLOR]{width:100%; background:#F7FBF7; color:#8D8D8D; [B]float:left;[/B] padding:20px 0 0; [B]clear:both;[/B]}[/QUOTE]
When someting is 100% the width of the viewscreen, there is no ability (or room) to "float:left;" anything. But [I]floating[/I] does remove the element from the document flow and thus, it probably losing any ability to be 'centered'. But you then "[B]clear[/B]" the float, thus, rendering the aforementioned float inert.

-It like saying "padding-left:50px; padding-left:0;" and the result? [I]Zero[/I]-left padding due to precidence (last-stated is obeyed, even if it overwrites a previous).

To answer your question re: centering these four images: a quick-fix is:

[B].block li a {margin-left:10px;}[/B]

but there are better ways to do this. ?

---
also:

instead of this:
....body{[B]padding:0px; margin:0px; [/B]background:#F7FBF7 url('images/bg.jpg') repeat-x 0 0; color:#006600; font-style:normal; font-variant:normal; font-weight:normal; line-height:18px; font-size:14px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}

div, p, ul, h2, h3, img{[B]padding:0px; margin:0px;[/B]}....][/QUOTE] again and again and again, just state:

[B]* {padding:0px; margin:0px;}[/B]

once, at the very first rule of your CSS,

and you have globally removed ALL padding and margins, from ANY/EVERY element that you can name. -Saves alot of redundant re-typing of "padding:0px; margin:0px;".

It also is a big step towards getting the page to look the same for IE as for all other browsers.

This is called the "universal seclector method" (" * {} ")

@CentauriMay 19.2008 — #As things are floated here, you just need to apply some maths. For a 760px wide container, 4 equal divisions give 190px each. If each panel div is made 180px wide with side padding of 5px, then the panels themselves will be centred. As each .block a is a total of 156px wide, this is 24px less than the panel div, therefore a left margin of 12px will bring them to the centre.

Not sure why you used a <ul> list for .block - totally unnecessary as the class could be applied directly to the <a>. You also have a LOT of repeated styles in this area which could be reduced considerably if each panel div was given a class - common styles between panel elements would then only need to be declared once, and the panel div id's only used to specify differences, such as the graphics.

@WebJoelMay 19.2008 — #-was typing a reply whilst Centuari was posting! ? My approach: unweildy and off by two pixels. ? But the (almost) same result

Also in #CSS _↴

EASY CSS Issue I am overlooking:IE problem with css Issue with menu hover images delay

Success!

Help @Albert1955 spread the word by sharing this article on Twitter...

Tweet This

How to center content within a div

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

How to center content within a div

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴