SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    divide body content into four equal-width div ?

    I want to divide body content into four equal-width div, but failed. here is the code. If very hard to control, I prefer the fourth one can take all leftover width.

    Thanks


    Code:
    <div id="first_column" style="width:23%; margin-right:0px; border:1px solid blue;">
    	1
    </div>
    
    <div id="fourth_column" style="width:23%; border:1px solid blue;float:right;margin-right:0px;">
    4
    </div>
    <div id="third_column" style="width:23%; border:1px solid blue;float:right;margin-right:0px;">
    3
    </div>
    <div id="second_column" style="width:23%; border:1px solid blue;float:right;margin-right:0px;">
    2
    </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi java148. Welcome to SitePoint.

    This is pretty basic, but something like this may be more useful:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style media="all">
    div {width: 25%; float: left;}
    div div {border: 1px solid blue; width: 100%;}
    </style>
    	
    </head>
    
    <body>
    
    <div>
    	<div>1</div>
    </div>
    
    <div>
    	<div>2</div>
    </div>
    <div>
    	<div>3</div>
    </div>
    <div>
    	<div>4</div>
    </div>
    
    </body>
    
    </html>

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Welcome to Sitepoint, java148.

    Ralph's solution is quite practical as you most likely have other divs or containing elements within these first four proposed divs. It's also IE6 friendly w/o requiring classes.

    However is an 11 year old browser is not withing your range of support and you want to streamline the markup you can also do this:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Experiment</title>
    		<style type="text/css">
    		body{padding-left:2px;}/*this abount accounst for the 'extra' border I added*/
    		body>div {width: 25%; float: left;border: 1px solid blue; margin-left:-2px; }
    		body>div+div {border-left:none; margin-left:-1px;}/*eliminates that 'double border' effect*/
    
    		</style>
    	</head>
    	<body>
    		<div>1</div>
    		<div>2</div>
    		<div>3</div>
    		<div>4</div>
    	</body>
    </html>
    note That you can still replace body>div and div+div with classes.. and it will add IE6 support.

    hope that helps

  4. #4
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I put some margin, then it doesn't work. how can we just let the fourth column take all leftover width ? And how to make the "Customer" shown in the center ?
    Code:
    <div id="first_column" style="width: 25%; float: left;margin-right:5px;">
    	<div style="border: 1px solid blue; width: 100%;">
    		<span style="align:center;">Cusomter</span>
    	</div>
    </div>
    
    <div id="second_column" style="width: 25%; float: left;margin-right:5px;">
    	<div style="border: 1px solid blue; width: 100%;;padding-left:0px;">2</div>
    </div>
    <div id="third_column" style="width: 25%; float: left;margin-right:5px;">
    	<div style="border: 1px solid blue; width: 100%;;padding-left:0px;">3</div>
    </div>
    <div id="fourth_column" style="width: 25%; float: left;">
    	<div style="border: 1px solid blue; width: 100%;;padding-left:0px;">4</div>
    </div>

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As for the "Customer" being in the center, it's not align:center, it's text-align:center;

    However remove that altogether. To get inline elements to center,y ou must set the text-align:center; on the PARENT. Aka that div parent needs that rule.

    You also should be careful in your CSS, you have an extra semi colon after width:100%; repeated 3 times, all in your inner divs, most likely from copy paste.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    If you want gaps between those sections, then you can't set widths of 25% and add on margins to that, as those margins are added to the overall width and so you run out of space.

    You could either reduce the widths to, say 24% and set a margin of 1%, or put the margins on the inner divs instead and change width: 100% to width: auto.

    As for the last column taking up the remaining space, it can be done, no doubt, but it's easier if the other columns have a fixed pixel width. E.g.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style media="all">
    div.col {width: 200px; float: left; margin-right: 5px;}
    div.last {margin-left: 620px;}
    div > div {width: auto; text-align: center; border: 1px solid blue;}
    
    </style>
    	
    </head>
    
    <body>
    
    <div class="col">
    	<div>Customer</div>
    </div>
    
    <div class="col">
    	<div>2</div>
    </div>
    <div class="col">
    	<div>3</div>
    </div>
    <div class="last">
    	<div>4</div>
    </div>
    
    </body>
    
    </html>
    By "customer" in the center, I assume you mean the text centered? That done with text-align: center (as in the example above).

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Do it like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Experiment</title>
    		<style type="text/css">
    		body{padding-left:68px;}/*this abount accounst for the 'extra' border I added*/
    		body>div {width: 25%; float: left;border: 1px solid blue; margin: 0 0 0 -68px; }
    		body>div+div {margin-left: 20px; }
    		#second>h3{text-align: center; margin-top:0; padding-top:0}
    		</style>
    	</head>
    	<body>
    		<div id="first">1</div>
    		<div id="second">
    			<h3>Customer</h3>
    		</div>
    		<div id="thrd">3</div>
    		<div id="fourth">4</div>
    	</body>
    </html>
    This provides a FIXED width space between divs.
    Now as far as your your other questions:

    1) As Ryan pointed out, the property is text-align:center; not align:center; Also, putting your CSS in the HTML tags really kinda defeats the purpose.. add IDs or better yet classes and define those within the style tag.. really it's the easiest part of CSS to learn

    2) Secondly, it only works for content in BLOCK elements ( span is not a block element) . So to do this you would end up targeting the parent DIV. Which would work but make NO SENSE. that's why...

    3) It would be better to use a BLOCK ELEMENT .. since it seems "customers" would be a heading... the we can use Hx ( I chose H3) and targeted that #second>h3 {text:align:center;}

    and there u go.


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
  •