1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Is is possible to center a 3 column layout without a wrapper?

Discussion in 'CSS' started by math20, Jul 16, 2006.

0
  1. #1
    I like not using a wrapper because when you resize the window the furthest right column goes underneath the next furthest right column instead of making a horizontal scroll bar so I'm wondering, Is is possible to center a 3 column layout without a wrapper?

    Thanks in advance!
     
    math20, Jul 16, 2006 IP
  2. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-us">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
	<title></title>
	<style type="text/css">

		#Div1 { background-color: rgb(255,195,195) }
		#Div2 { background-color: rgb(195,255,195) }
		#Div3 { background-color: rgb(195,195,255) }

		#Div1, #Div2, #Div3 {
			/* give the box size */
			padding: 100px 0; width: 33.33%;

			/* for IE's float-margin bug */
			display: inline;

			float: left;
		}

	</style>
</head>

<body>
	<div id="Div1"></div>
	<div id="Div2"></div>
	<div id="Div3"></div>
</body>

</html>
    HTML:
     
    FeelLikeANut, Jul 16, 2006 IP
  3. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You're so funny FeelLikeANut :)

    I mean fixed width columns.
     
    math20, Jul 16, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Why don't you make the wrapper as wide as the sum of the columns' widths?

    cheers,

    gary
     
    kk5st, Jul 16, 2006 IP
  5. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yes but then the furest columnn wouldn't do that cool go under the next column thing.
     
    math20, Jul 16, 2006 IP
  6. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #6
    In that case, math20, you will need a wrapper. The wrapper is what allows you to move and control all three columns as a single unit. And, to prevent the right-most column from being pushed to the next line, you need to do exactly what kk5st already said: set the wrapper's width to the sum of the columns' widths.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-us">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
	<title></title>
	<style type="text/css">

		#Div1 { background-color: rgb(255,195,195) }
		#Div2 { background-color: rgb(195,255,195) }
		#Div3 { background-color: rgb(195,195,255) }

		#Div1, #Div2, #Div3 {
			/* give the box size */
			padding: 100px 0; width: 200px;

			/* for IE's float-margin bug */
			display: inline;

			float: left;
		}

		#Wrapper { width: 600px; margin: auto }

	</style>
</head>

<body>
	<div id="Wrapper">
		<div id="Div1"></div>
		<div id="Div2"></div>
		<div id="Div3"></div>
	</div>
</body>

</html>
    HTML:
     
    FeelLikeANut, Jul 17, 2006 IP
  7. itsall3

    itsall3 Active Member

    Messages:
    505
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #7
    I REALLY want to improve my sites speed, and thought css was the way -- but how can your 818 bytes:

    Load faster then the table version at: 263 bytes

    
<table width="800" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <th width="200" bgcolor="#330066" scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th width="200" bgcolor="#330066" scope="col">&nbsp;</th>
  </tr>
</table>
    HTML:
    Cheers
     
    itsall3, Jul 22, 2006 IP
  8. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #8
    The table version is duplicated on every page, while an external CSS stylesheet needs to be downloaded only once. If we imagine there are fifty pages, then the table version is now using over 12 kb, but the CSS version is still only 818 bytes.

    And, of course, this is an excessively simplistic design. When designs get complicated, tables bloat fast, and the CSS version may even have a smaller file size with just a single page.
     
    FeelLikeANut, Jul 22, 2006 IP
  9. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Guys, I figured out a way that requires no wrapper and works in IE.

    html:

    css:

     
    math20, Jul 22, 2006 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    Please explain your aversion to using a wrapper for the page as a whole. One of the cornerstones of css based layout is that you can create a styling context that allows everything within the context to be treated as a single unit. The path you've chosen is overly complex and is not generally robust.

    cheers,

    gary
     
    kk5st, Jul 22, 2006 IP
  11. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I copied and tested your code, and it didn't work in IE or FF. I even tried kicking the browsers into quirks mode, and it still didn't work correctly.

    math20, according to your first post, your only reason for avoiding a wrapper is because the right-most column is wrapped to the next line. kk5st and I have already shown you how to avoid that, however. Why are you still trying to avoid a wrapper? Even if you do manage to find some complicated way to make it not necessary, it is still useful.
     
    FeelLikeANut, Jul 22, 2006 IP
  12. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I dunno, it kind of boxes me in :)

    Sorry, I miscalculated my margins. here you go.

     
    math20, Jul 22, 2006 IP
  13. Vi5

    Vi5 Guest

    Messages:
    90
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I'm quite impressed with that version other than the fact you used position:absolute; and are now screwed if you want a footer.
     
    Vi5, Jul 23, 2006 IP
  14. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Check this out:

     
    math20, Jul 23, 2006 IP
  15. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #15
    You can't honestly think that is better than using a wrapper? I use a wrapper whether I'm going to center my layouts or not. Whether they're 2 column or 4. It just makes sense to plan ahead. Never have I had a problem where I actually had to remove the wrapper to solve it. I'm not saying that problem doesn't exist though. I'm just wondering how a wrapper could "box you in"?
     
    Greg-J, Jul 25, 2006 IP
  16. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Yeah, a wrapper is probably better and a lot easier but I thought it was interesting to do it this way.
     
    math20, Jul 25, 2006 IP
  17. Gordaen

    Gordaen Peon

    Messages:
    277
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #17
    That's a very hackish way to accomplish it... What's the reason for using fixed width for all the columns (and apparently fixed height as well?)? I feel sorry for people who actually buy decent monitors when they have to view a site that uses so little of the space available. Have you tested your solution on a small browser window? Even if people have a high resolution monitor, they may visit your site with the browser only taking a small portion of their screen.

    The answer to your question, as you've found, is yes. Fixed-size columns can be centered without a wrapper, but why would you want to?
     
    Gordaen, Jul 27, 2006 IP