SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems with 3 coloumn

    Hi

    I am sort of new to CSS. I am trying to get three boxes lined up like a 3 coloumn.

    The first box I have defined it as: float:left, width:40%

    The second (middle box) as: left-margin: 40%, right-margin: 30%, width is 25%.

    The second box lines up next the first. However the third box sits in the right side but below the second box, as if the blank space is occupied by the right-margin command.

    The thrid box is defined as: float:right, width:25%

    Can anyone help me to get the third box to line up next to the second box.

    Regards

    Explorer

  2. #2
    SitePoint Guru babyboy808's Avatar
    Join Date
    Nov 2004
    Location
    dublin
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this should work

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Layout</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
    * {
    	padding: 0; margin: 0;	
    }
    html {
    	height: 100.1&#37;;	
    }
    #content1 {
    	float: left;
    	width: 40%;
    	background-color: #333;
    }
    #content2 {
    	float: left;
    	width: 25%;
    	background-color: #666;
    	margin: 0 4.9%;
    }
    #content3 {
    	float: right;
    	width: 25%;
    	background-color: #333;
    }
    </style>
    </head>
    <body>
    	<div id="content1">content 1</div>
    	<div id="content2">content 2</div>
    	<div id="content3">content 3</div>
    </body>
    </html>
    Although, I personally wouldn't apply margin's or padding with a percentage and would instead use a div inside the middle container or apply margin's to the elements being used within it directly.

    The problem that you've got is that all the width's, padding's, margin's and border's must not exceed 100% or the maximum width of it's parent. As yours adds up to 160% then div's drop underneath each other where there's not enough space.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    keeping the width fixed on the screen

    Hi

    Thanks for the response. But my coloumns resizes when I resize the screen. Do you know how I can keep it fixed? I tried using fixed width instead of the percentages but it makes no difference.

    Regards

    Explorer

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,119
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the response. But my coloumns resizes when I resize the screen. Do you know how I can keep it fixed? I tried using fixed width instead of the percentages but it makes no difference.
    I don't know what you mean, all you need to do is change the &#37;'s to px to make it fixed widths..

    Oh, and change #content3 to float: left so it stacks against the other floats.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Mark's pointed out, if you don't want it to fill a percentage of the screen then don't use percentages

    Try this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Layout</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
    * {
    	padding: 0; margin: 0;	
    }
    html {
    	height: 100.1&#37;;	
    }
    body {
    	width: 760px;
    	margin: 0 auto;	
    }
    #container {
    	float: left;
    	width: 760px;	
    }
    #content1 {
    	float: left;
    	width: 300px;
    	background-color: #333;
    }
    #content2 {
    	float: left;
    	width: 200px;
    	background-color: #666;
    	margin: 0 30px;
    }
    #content3 {
    	float: left;
    	width: 200px;
    	background-color: #333;
    }
    </style>
    </head>
    <body>
    	<div id="content1">content 1</div>
    	<div id="content2">content 2</div>
    	<div id="content3">content 3</div>
    </body>
    </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I think you have misunderstood me. I mean the width remains the same (regardless if u use &#37; or pix) but as I resize my browser, the content also resizes. If I make the screen smaller the div's become longer and narrower and some it goes to the bottom.

    I want all the divs to remain in place as the browerser contracts or expands. I know with tables this would only happen if I used % instead of the pix.

    Regards

    Explorer

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't quite understand. The second example that I've provided will ensure that those div's always remain the same.

    No matter what size your browser is, the total width will always be 760px.

    Have you tried using the code I've provided?

    I'm presuming that you're trying to adapt my example to your code in which case there's something else you're not doing correctly. Could you please provide us with your full HTML and CSS and I'll take a look at it.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I have applied your code (except the margin, i have left that default to 5px), when I resize the browser the content on the right goes down below the second coloumn, and width of the divs become narrower. As you make the screen width smaller the second coloumn becomes narrower until it gets pushed below the first coloumn.

    May be I should make the position absolute? Again I have not fully understood positions.

    Regards

    Explorere

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My CSS is :


    .boxanalysis {
    float:left;
    font-family: Georgia, "Times New Roman", Times, serif;
    border-width:thin;
    padding:0.5em 1em 1em 1em;
    border-style: solid;
    border-color: #000000;
    height: auto;
    /* top: 151px; */
    font-size: 1.2em;
    text-align: justify;
    font-stretch:expanded;
    background-color: #CAFBD2;
    visibility: visible;
    width:300px;
    margin-top: 5px;
    margin-left:52px;
    }

    .boxmiddle {
    float:left;
    height:auto;
    top:144px;
    left:465px;
    font-family:inherit;
    text-align: justify;
    line-height:125&#37;;
    padding:0.5em 1em 1em 1em;
    border-width: thin;
    border-style: solid;
    border-color: #CCCCCC #666666 #666666 #CCCCCC;
    height: auto;
    font-size: 1.2em;
    background-color: #CDFCFC;
    visibility: visible;
    width:250px;
    margin-top: 5px;
    margin-left:5px;
    }


    .boxright {
    float:right;
    height:auto;
    top:143px;
    left:713px;
    font-family:inherit;
    text-align: justify;
    line-height:125%;
    padding:0.5em 1em 1em 1em;
    border-width: thin;
    border-style: solid;
    border-color: #CCCCCC #666666 #666666 #CCCCCC;
    height: auto;
    font-size: 1.2em;
    background-color: #CAFBD2;
    visibility: visible;
    margin-top: 5px;
    width: 250px;
    }

    And the HTML is:


    <div id="outer"> <!-- this is wrapper that takes up 90% of the height and leaves 10% for the footer -->

    <div class="boxanalysis">
    <div align="center" class="big">Latest Analysis </div>
    <hr><br>
    <?php do { ?>
    <div class="image_float" align="right"><img src="<?php echo $row_RsHeadlines['picture']; ?>" style="position:static" height="120" width="120"/> </div>
    <div class="title">
    <a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>"> <?php echo $row_RsHeadlines['title']; ?> </a></div>
    <br>
    <div><?php echo $row_RsHeadlines['description']; ?>
    <a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>"> More... </a> </div>
    <br>
    <?php } while ($row_RsHeadlines = mysql_fetch_assoc($RsHeadlines)); ?>


    </div>

    <div class="boxmiddle">
    <div align="center" class="big">21st Century Myths </div>
    <hr>
    <div class="fiction"> <?php echo $row_RsMyth['fiction']; ?></div>
    <br>
    <div class="bigcolor"> But the truth is/div>
    <br>
    <div> </font> <?php echo $row_RsMyth['fact']; ?></div>
    </div>

    <div class="boxmiddle">
    <div align="center" class="big">Topic </div>
    <hr>

    </div>

    <div class="boxmiddle">
    <div align="center" class="big">Poems </div>
    <hr>
    </div>

    <div class="boxright">
    <div class="big" align="center"> Forthcomming Book </div>
    <hr>
    <div class="big" align="center" > Title </div>
    <br>
    <div align="center"> By First Name Surname </div>
    </div>
    <div class="boxright">
    <div align="center" class="big"> In Quotes </div>
    <hr>
    <div align="center" class="boldtext"> "<?php echo $row_RsQuote['content']; ?>" </div>
    <br>
    <div align="left" class="medium"><?php echo $row_RsQuote['source']; ?></div>
    </div>





    <div id="clearfooter"> </div>
    </div>

    <center>
    <div id="footer"><p align="center"><a href="contactus.html"> Contact Us |</a><a href= "aboutus.html"> About Us | </a><a href="site.html">Site Map</a></p>
    </div>
    </center>
    </body>
    </html>

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also another related question - I am trying to use 3 divs for the middle coloumn and 3 for the right coloumn. The problem is the divs intended for the middle coloumn occupies the right coloumn and pushes the divs on the right coloumn down. Is there a way to ensure that the divs middle coloumn does not encroach on the right most coloumn and instad appear below the div in the middle coloumn?

    Regards

    Explorer

  12. #12
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1 - Make sure your code validates - http://validator.w3.org

    2 - Don't include presentational code within your HTML

    3 - You're getting a bit confused with some CSS properties as there's a lot of things in your code which aren't needed or only apply to absolute or relative positioning, which you're not using.

    4 - You'll need another container around sections of your page otherwise there's no way of positioning the several containers that you have at the moment within the same column of the page

    5 - Whilst not completely wrong, I'd try indenting your code so that it's easier to read, that way you'd have picked up the missing closing div and any other missing tags, including the </font> tag that wasn't doing anything.

    6 - You need to understand the box model. Any padding, margin or border you include on an element is added to the total width. If it's container has less than this then it will push your layout out of position which was causing some problems in your layout.

    I think this will solve your problem (and also validates although not entirely sure on the rest of your code as this is obviously php, not complete HTML )

    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Layout</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
    body {
    	width: 800px;
    	margin: 0 auto;	
    	font-family: Georgia, "Times New Roman", Times, serif;
    	text-align: justify;
    	line-height: 125&#37;;
    	padding-top: 10px;
    }	
    #outer {
    	width: 800px;
    	float: left;
    	font-size: 1.2em;
    }
    #container1 {
    	float: left;
    	width: 300px;	
    }
    #container2 {
    	float: left;
    	width: 250px;	
    }
    #container3 {
    	float: left;
    	width: 250px;	
    }
    .boxanalysis {
    	float:left;
    	padding: 5px 10px 10px 10px;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #CCC #666 #666 #CCC;
    	text-align: justify;
    	background-color: #CAFBD2;
    	width: 278px;
    	margin-top: 5px;
    }
    .boxmiddle {
    	float:left;
    	height:auto;
    	padding: 5px 10px 10px 10px;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #CCC #666 #666 #CCC;
    	height: auto;
    	background-color: #CDFCFC;
    	width: 223px;
    	margin: 5px 0px 0px 5px;
    }
    .boxright {
    	float:left;
    	line-height:125%;
    	padding: 5px 10px 10px 10px;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #CCCCCC #666666 #666666 #CCCCCC;
    	background-color: #CAFBD2;
    	margin: 5px 0px 0px 5px;
    	width: 223px;
    }
    .big {
    	text-align: center;	
    }
    #footer {
    	clear: both;
    	text-align: center;	
    	font-size: 80%;
    	padding-top: 20px;
    }
    .image_float {
    	float: right;	
    }
    .center {
    	text-align: center;	
    }
    </style>
    </head>
    <body>
    
    <div id="outer">
    	
    	<div id="container1">
    		<div class="boxanalysis">
    			<div class="big">Latest Analysis</div>
    			<hr><br>
    			<?php do { ?>
    			<div class="image_float">
    				<img src="<?php echo $row_RsHeadlines['picture']; ?>" style="position:static" height="120" width="120" alt="">
    			</div>
    			<div class="title">
    				<a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>"> <?php echo $row_RsHeadlines['title']; ?> </a>
    			</div>
    			<br>
    			<div><?php echo $row_RsHeadlines['description']; ?>
    				<a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>"> More... </a>
    			</div>
    			<br>
    			<?php } while ($row_RsHeadlines = mysql_fetch_assoc($RsHeadlines)); ?>
    		</div>
    	</div>
    	
    	<div id="container2">
    		<div class="boxmiddle">
    			<div class="big">
    				21st Century Myths
    			</div>
    			<hr>
    			<div class="fiction">
    				<?php echo $row_RsMyth['fiction']; ?>
    			</div>
    			<br>
    			<div class="bigcolor"> 
    				But the truth is
    			</div>
    			<br>
    			<div>
    				<?php echo $row_RsMyth['fact']; ?>
    			</div>
    		</div>
    		<div class="boxmiddle">
    			<div class="big">
    			Topic
    			</div>
    			<hr>
    		</div>
    		<div class="boxmiddle">
    			<div class="big">
    			Poems
    			</div>
    			<hr>
    		</div>
    	</div>
    	
    	<div id="container3">
    		<div class="boxright">
    			<div class="big">
    				Forthcomming Book
    			</div>
    			<hr>
    			<div class="big">
    				Title
    			</div>
    			<br>
    			<div class="center">
    				By First Name Surname
    			</div>
    		</div>
    		<div class="boxright">
    			<div class="big">
    				In Quotes
    			</div>
    			<hr>
    			<div class="boldtext">
    				<?php echo $row_RsQuote['content']; ?>
    			</div>
    			<br>
    			<div class="medium">
    				<?php echo $row_RsQuote['source']; ?>
    			</div>
    		</div>
    	</div>
    		
    	<div id="footer">
    		<a href="contactus.html"> Contact Us |</a><a href= "aboutus.html"> About Us | </a><a href="site.html">Site Map</a>
    	</div>
    	
    </div>
    
    </body>
    </html>

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi CSSWIZ,

    Thanks very much, the container helped a lot. I was already thinking along those lines but I did not want to make my CSS more cluttered. Yes the container brought the thing the way I want it.

    Now as for the width of the DIVs, you are right it does not change. Hence I need to rephrase my question. What happens is the content form the 2nd and third container goes below the first cloumn as you shrink the screen. The content gets repositioned and I dont want this. I have tried to give fixed height but that does not help. If can I stop that than I would be on my way.

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all

    I seem to have solved the above by applying absolute positions.

    I dont quiet understand relaitve positions and the other types. Soon as I apply relative to container two and three, I am getting strange results like the coloumns being swapped around etc. May be someone can elboarte or point me to a good article.

    Can anyone here reccomend me a good book to read or get? I see some are advertised on this site but obviously reccomendations would help.

    I was using Simon Collison's book which is excellant on the basics, it does really start off well, but as soon as I get to the more advance stuff like layout it is not that good. In fact I was using the code from his book on the layout. As you can see it failed until CCWIZ refered to the containers.

    Regards

    Explorer

  15. #15
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you use the code I've given you then you shouldn't have that problem

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I have got a different problem now. My footer has stopped working which I built using the code from this site (How to section), the code is as follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash hack \*/
    html, body{height:100&#37;;}
    /* end hack */
    html,body {margin:0;padding:0}
    body {text-align:center}/* centre for ie5.+*/
    #outer{
    min-height:100%;
    height:auto;
    width:766px;
    border-left:1px solid #000;
    border-right:1px solid #000;
    margin-left:auto;/* center it*/
    margin-right:auto;/* center it*/
    position:relative;
    text-align:left;
    }
    * html #outer{
    height:100%;
    width:768px;/* box model hack for ie5.+*/
    w\idth:766px
    }
    #footer {
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
    background-color: #FF8080;
    color: #000000;
    }
    #clearfooter{clear:both;height:50px;width:100%}
    div>p {margin:0}

    </style>
    </head>
    <body>
    <div id="outer">
    <p>content goes here</p>
    <div id="clearfooter"></div>
    <div id="footer">Footer -</div>
    </div>
    </body>
    </html>

    And my footer now for some reason goes to the top of the page just below the masterheader. The only way I can force it down is by fixing the top parameter. Does anyone know whats going on? THe only difference is I have other container divs within the outershell. But that should not make any difference.

    Regards

    Explorer


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
  •