Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Columns not lining up on page

    Hello all,

    I have a problem with a page I'm trying to build that has 3 columns. I'm using a template I've found and what I want is a 10 pixel wide column on the left (#content-1) which has an image in it to look like a slight shadow on the edge of a page, a centre column (#content-2-1) which will have the page content in it, and then a third 10 pixel column on the right which has the opposite edge shadow image in it(#content-2-2). Columns -2-1 and -2-2 are in a column called #content-2.

    The link to the page is http://www.frcclothing.com.au/dev/index_col3.html

    The HTML is as follows:

    Code:
    <title>Otway RV &amp; Caravan Repairs</title>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<meta name="description" content="" />
    	<meta name="keywords" content="" />
    	<meta name="robots" content="index, follow" />
    	<style media="screen" type="text/css">
    	
    	</style>
    	
    																				<link rel="stylesheet" type="text/css" href="http://www.frcclothing.com.au/dev/css/styles_col3.css">
    	
    </head>
    <body>
    
    <div id="body">
    <div id="header"><img src="images/header.jpg" alt="Otway RV &amp; Caravan Repair"></div>
        
            <div id="content-1"></div>
            <div id="content-2">
                <div id="content-2-1">
    						content 2 1<br />
    						content 2 1<br />
    						content 2 1<br />
    						content 2 1<br /></div>
                <div id="content-2-2"></div>
            
        </div>
        <div id="footer">footer</div>
    		</div>
    
    </body>
    </html>
    and the CSS is:

    Code:
    html,
    body {
        margin:0;
        padding:0;
        color:#000;
        background:#fff;
    }
    #body {
        width:960px;
        margin:0 auto;
        background:#ddd;
    }
    #header {
    		width: 725px;
    		margin: 0 auto;
        background:#fdd;
    		padding:10px;
    }
    #content-1 {
        background-image: url("http://www.frcclothing.com.au/dev/images/left_grad.gif");
    		background-repeat:repeat-y;
    		width: 10px;
    		height: 100px;
        
    }
    #content-2-1 {
        background:#ddf;
    		float:left;
        width:940px;
    }
    #content-2-2 {
    		float:right;
    		background-image: url("http://www.frcclothing.com.au/dev/images/right_grad.gif");
    		background-repeat:repeat-y;
        width: 10px;
    		height: 100px;
    }
    
    #content-2 {
        float:right;
        width:950px;
    }
    
    #footer {
        background:#ff9;
    		clear:both;
        padding:10px;
    }
    My problems are that the the left hand shadow column isn't lined up with the centre content column and right hand shadow column, it appears first and the two other columns are forced down below it. Also, I need the two shadow columns to expand downwards in line with however much content is in the centre column. At the moment I've just given them both a height of 100 pixels and set them to repeat downwards but that obviously isn't the answer.

    Am I making things more complicated here than need be? All the two columns either side are for is to hold the shadow images, is there a way to just have the one column and float each shadow image to the left and right?

    Any help is much appreciated,
    Andrew.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Normally you would float all columns the same, and make allowance for margins, padding and such. Or you may need to add another clear statement.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 601 Times in 600 Posts
    chocko638, you might love the number combinations here, but I have trouble following things that are not read left to right so I changed the names of the columns.
    The far left is #content-1. The middle is #content-2, and the far right is #content-3. Easier for me. OK?

    Then as DrDOS suggests I float the columns to the left. But I left #content-3 floated to the right. (BUT I would not do this cause it could split the distance between the middle and right columns. Just saying)

    Also added a doctype and changed the main div name.(I just don't like using body for anything other than the BODY)

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Otway RV &amp; Caravan Repairs</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index, follow" />
    <style type="text/css">
    html,
    body {
        margin:0;
        padding:0;
        color: #000;
        background: #fff;
    }
    #wrapper {
        width:960px;
        margin:0 auto;
        background:#ddd;
    }
    #header {
    	width: 725px;
    	margin: 0 auto;
        background:#fdd;
    	padding:10px;
    }
    #content-1 {
        background-image: url("http://www.frcclothing.com.au/dev/images/left_grad.gif");
    	background-repeat:repeat-y;
    	width: 10px;
    	height: 100px;
    	float:left;
    }
    #content-2 {
        float:left;
        width:950px;
    }
    #content-2-1 {
        background-color:#ddf;
    	float:left;
        width:940px;
    }
    #content-3 {
    	float:right;
    	background-image: url("http://www.frcclothing.com.au/dev/images/right_grad.gif");
    	background-repeat:repeat-y;
    	width: 10px;
    	height: 100px;
    }
    #footer {
        background:#ff9;
    	clear:both;
        padding:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="header">
    		<img src="http://www.frcclothing.com.au/dev/images/header.jpg" alt="Otway RV &amp; Caravan Repair">
    	</div>
    	<div id="content-1"></div>
    	<div id="content-2">
    		<div id="content-2-1">
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    		</div>
    		<div id="content-3"></div>
    	</div>
    	<div id="footer">footer</div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New Coder
    Join Date
    Jun 2004
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Normally you would float all columns the same, and make allowance for margins, padding and such. Or you may need to add another clear statement.
    Can you explain what you mean by floating them all the same? When you say making allowances for padding and such, you mean if I add 5 pixels of padding to one column then the width of the next column has to reduce by that same amount to keep the overall width of the container correct?

    Edit: I just figured out what you mean by floating them all the same. You mean all to the left, yes? Sometimes I'm a little slow on the uptake!
    Last edited by chocko638; 08-11-2013 at 12:27 PM. Reason: Had a long hard think.

  • #5
    New Coder
    Join Date
    Jun 2004
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    chocko638, you might love the number combinations here,
    Sorry about the combinations, they were done that way in the template I'm using and just like you I spent some time staring at them before they made sense to me too!

    Quote Originally Posted by sunfighter View Post
    Then as DrDOS suggests I float the columns to the left. But I left #content-3 floated to the right. (BUT I would not do this cause it could split the distance between the middle and right columns. Just saying)
    I've made all the changes you suggested and it now works like I wanted. I then changed the float for #content-2-1 to the left and it works that way as well. Like DrDOS is saying it's best to have all the columns stacked against each other, all floated left, and as long as your column order in the HTML is correct it will display correctly?

    As for the depth of the edge columns, I still can't think of a way to have them match the centre column?

    Thanks both of you for your help, it's much appreciated.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Quote Originally Posted by chocko638 View Post
    As for the depth of the edge columns, I still can't think of a way to have them match the centre column?
    If by " the depth of the edge columns" you mean their height, it can be done.

    I moved the two columns inside the middle column, change their height to 100% instead of a set amount, then change the height and width of #content-2. Play with #content-2's height.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Otway RV &amp; Caravan Repairs</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index, follow" />
    <style type="text/css">
    html,
    body {
        margin:0;
        padding:0;
        color: #000;
        background: #fff;
    }
    #wrapper {
        width:960px;
        margin:0 auto;
        background:#ddd;
    }
    #header {
    	width: 725px;
    	margin: 0 auto;
        background:#fdd;
    	padding:10px;
    }
    #content-1 {
        background-image: url("http://www.frcclothing.com.au/dev/images/left_grad.gif");
    	background-repeat:repeat-y;
    	width: 10px;
    	height: 100%;
    	float:left;
    }
    #content-2 {
        float:left;
        width:960px;
    	height: 90px;
    }
    #content-2-1 {
        background-color:#ddf;
    	float:left;
        width:940px;
    }
    #content-3 {
    	float:right;
    	background-image: url("http://www.frcclothing.com.au/dev/images/right_grad.gif");
    	background-repeat:repeat-y;
    	width: 10px;
    	height: 100%;
    }
    #footer {
        background:#ff9;
    	clear:both;
        padding:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="header">
    		<img src="http://www.frcclothing.com.au/dev/images/header.jpg" alt="Otway RV &amp; Caravan Repair">
    	</div>
    
    	<div id="content-2">
    	<div id="content-1"></div>
    		<div id="content-2-1">
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    		</div>
    	<div id="content-3"></div>
    	</div>
    	<div id="footer">footer</div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New Coder
    Join Date
    Jun 2004
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    OK, I've made the changes you suggested and now I have some questions.

    I reduced the fixed height of #content-2 and the footer div then overlapped under #content-2-1, I increased the height and obviously the footer moved down below #content-2-1 and displayed OK. My question is how do I have the footer div stay below #content-2? I'd have thought the clear:both; rule for the footer would have done that?

    Also, how can I have #content-2-1 expand vertically according to how much text/content is in the div? I tried setting the height of #content-2 to 100% so that it could expand in relation to #content-2-1 but that didn't work.

    Finally, #content-2-1 seems to have padding around the text, it looks to be about 10 pixels above and below, but I haven't set any padding for it?

    Thanks again for your help.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Quote Originally Posted by chocko638 View Post
    I reduced the fixed height of #content-2 and the footer div then overlapped under #content-2-1, ...
    Yes the is correct. I gave you the minimum height of #content-2 that would display the text we had. You made it smaller. -- The footer will display under #content-2, which it did. It has nothing to do with #content-2-1 which is inside of #content-2.

    Quote Originally Posted by chocko638 View Post
    Finally, #content-2-1 seems to have padding around the text
    I don't see that. But a line of text does have space above it and below it. Try removing the text and just put a dot (period) in. you can see the space. this can be controlled via CSS, but I'd leave it alone.

    Quote Originally Posted by chocko638 View Post
    Also, how can I have #content-2-1 expand vertically according to how much text/content is in the div?
    OK. That's a different thing then what we started with. There are a number of ways. I am going to assume you want the borders to the left and right of the text.

    This is what I think is best. Get rid of your two images.
    http://www.frcclothing.com.au/dev/images/right_grad.gif
    and
    http://www.frcclothing.com.au/dev/images/left_grad.gif
    and make a single image to use as background. HOW I did this was to generate the page as above but with out the first three lines of text. I used a <br> instead. I then took a picture of the results and got this:


    Then I redid the page. Add or take away text and things will follow. Pay attention to the margins in #content-2-1

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Otway RV &amp; Caravan Repairs</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index, follow" />
    <style type="text/css">
    html,
    body {
        margin:0;
        padding:0;
        color: #000;
        background: #fff;
    }
    #wrapper {
        width:960px;
        margin:0 auto;
        background:#ddd;
    }
    #header {
    	width: 725px;
    	margin: 0 auto;
        background:#fdd;
    	padding:10px;
    }
    #content-2 {
        width:960px;
    	background: #ff0000 url('images/sampleBG.png') 0 0 repeat-y;
    }
    #content-2-1 {
        background-color:#ddf;
        width:940px;
    	margin: 0 10px;
    }
    #footer {
        background:#ff9;
    	clear:both;
        padding:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="header">
    		<img src="http://www.frcclothing.com.au/dev/images/header.jpg" alt="Otway RV &amp; Caravan Repair">
    	</div>
    	<div id="content-2">
    		<div id="content-2-1">
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 6<br />
    		</div>
    	</div>
    	<div id="footer">footer</div>
    </div>
    </body>
    </html>
    P.S. the background color is red so I could see if things didn't work out. Change that to #ddf.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #9
    New Coder
    Join Date
    Jun 2004
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    OK. That's a different thing then what we started with.
    I apologise for that, the template I'm using probably isn't the right one for what I'm trying to achieve and I've made things more complicated than they need to be.

    I made your changes (and I've changed most of my div background colours to what they eventually will be) and also had a go at changing a few things myself to see what happened and I've got some questions.

    I've got a thin black border across the top of the #content-2-1 div, now that the background image is in the #content-2 div the border doesn't quite reach either side to the correct point on each edge shadow. Is there a way to specify a pixel length for a border? If there is I was thinking I could center justify a border across the top of the #content-2 div and it would line up with the background image correctly on each side.

    I moved the background image into the #content-2-1 div, increased its width to 960 pixels and I seemed to lose the right side of the image off the edge of the div. I then tried to float the #content-2-1 div to the left in the #content-2 div and the right side of the image lined up but I still couldn't see the right side.

    I removed the float and then had a go at decreasing the left and right margins to 0 pixels. My thinking was that the background image would sit squarely in the div and I wouldn't have to worry about the margins (I was assuming you put a 10 pixel margin in so that the text/content wouldn't sit over the edge shadows?). I'm not sure how I was then going to stop the text from sitting over the edge shadows, I hadn't thought it that far through yet.

    Anyway, none of what I played around with worked so I've gone back to your changes.

    I'm also trying to move the nav div up a little closer to the header div and also away from the top edge of the #content-2 div. I've changed the padding values for both divs but as it is at the moment the nav div is overlappingthe #content-2 div. I'd have thought that as the browser renders the page it would place each div on top of each other, div a on top and then div b below edge to edge as they run down the page, why would they overlap?

    Thanks again for your time, I'm learning as I go.

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 601 Times in 600 Posts
    I think you should study the box model. http://www.w3schools.com/css/css_boxmodel.asp
    Any time you change or add or subtract a margin, a padding, etc. you chage the over all height or width of the box (div).

    The background image has a width of 960 pixels! The #content-2-1 div has a width of 940 so its no wonder you can't see the right side of it.

    The 10px right/left margin on the #content-2-1 is used to position it so you can see the border the image creates.

    I don't know why you "I've got a thin black border across the top of the #content-2-1 div,"...
    Is there a way to specify a pixel length for a border?
    No, not to a border, you can only control it's thickness.
    There is a trick you could use to do this. Make a div with no background and position it in the #content-2-1.
    Code:
    #small{
    	width: 300px;
    	margin: 0 auto;
    	border-top: 1px solid black;
    }
    
    and the html
    <div id="content-2">
    	<div id="small"></div>
    A finally your last paragraph: "I'm also trying to move the nav div up a little closer to the header div and also away from the top edge of the #content-2 div.... (and others)" What nav div???
    Right now your page has 3 divs the header, content-2, and the footer. You can place another div anywhere in that line up and things will work out IF you don't use positioning on them Like 'absolute' or 'float'. What goes on in those divs should not effect the page layout.

    " I've changed the padding values for both divs" What TWO divs???? If you change the padding your changing the width[SEE ABOVE BOX MODEL].
    If your adding a nav div make the width 960. if you add padding change the width. You should include code when you ask about changes.

    If the nav div is still giving you problems next time give me all the code your using.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #11
    New Coder
    Join Date
    Jun 2004
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    " I've changed the padding values for both divs" What TWO divs???? If you change the padding your changing the width[SEE ABOVE BOX MODEL].
    If your adding a nav div make the width 960. if you add padding change the width. You should include code when you ask about changes.

    If the nav div is still giving you problems next time give me all the code your using.
    I'm sorry about that, I thought you were looking at my code as I was messing around with it in the development folder I've got on my server. I'll paste both my css and HTML below.

    Code:
    html,
    body {
        margin:0;
        padding:0;
        color: #000;
        background: #fff;
    }
    #wrapper {
        width:960px;
        margin:0 auto;
        background:#ffffff;
    }
    #header {
    	  width: 725px;
    		height: 120px;
    	  margin: 0 auto;
    		margin-top: 5px;
        background: #ffffff;
    	  padding: 0px;
    }
    
    #content-2 {
        width:960px;
    		background: #ff0000 url('http://www.frcclothing.com.au/dev/images/main_bg.gif') 0 0 repeat-y;
    }
    
    #content-2-1 {
        border: 0px;
    		width: 940px;
    		margin: 0 10px;
    }
    
    #small{
    	width: 945px;
    	margin: 0 auto;
    	border-top: 1px solid black;
    }
    
    #footer {
        background:blue;
    	  clear:both;
        padding:10px;
    }
    
    #content-2-1 p {
    		padding: 0px;
    }
    
    #nav		{
    		width: 723px;
    		height: 30px;
    		background: #ffffff;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 5px;
    		padding: 5px;
    }
    
     	.tableNav {
    						 	  border: 0px;
    								border-spacing: 5px;
    								margin: auto;
    								padding: 0px;
    										}
    										
    	.tableNav tr {
    						 		padding: 0px;
    										}
    										
    	.tableNav td {
    							  background-image: url(http://www.frcclothing.com.au/dev/images/navbutton_bg.gif);
    							 	height: 30px;
    								width: 75px;
    							 	padding: 3px;
    								font-size: 90%;
    								font-family: helvetica, arial, sans-serif;
    								font-weight: bold;
    								text-align: center;
    								vertical-align: center;
    								color: black;
    								border: 0px;
    										}
    and the HTML

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Otway RV &amp; Caravan Repairs</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index, follow" />
    	
    																				<link rel="stylesheet" type="text/css" href="http://www.frcclothing.com.au/dev/css/styles_col3.css">
    	
    </head>
    <body>
    
    <div id="wrapper">
    	<div id="header">
    		<img src="http://www.frcclothing.com.au/dev/images/header.jpg" alt="Otway RV &amp; Caravan Repair">
    	</div>
    	
    	<div id="nav">
    			 					<table class="tableNav"><tr>
    								<td>Home</td>
    								<td>About Us</td>
    								<td>Gallery</td>
    								<td>Contact</td></tr>
    								</table>
    	</div>
    	
    				<div id="content-2">
    						 <div id="small"></div>
    						 		 <div id="content-2-1">
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 1<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 25<br />
    			content 2 6<br />
    								</div>
    				</div>
    	
    	<div id="footer">footer</div>
    	
    </div>
    
    </body>
    </html>
    I've had a look at the box model tutorial you linked to (thanks for that) and a lot of my problems were coming from two incorrect assumptions I was making-
    1. After specifying a width for a div I thought that adding padding would move any content in the div inwards, meaning I didn't understand that the padding figure added to the overall height and width of the div.
    2. I was trying to use padding to space divs away from each other when I should have been specifying margins.

    I've used your trick for the top border that I wanted across #content-2-1 and it works well except for one thing. As it is at the moment I've specified the #small div width at 945 pixels. The border in it almost runs from where I want it on each side above the shadow edge except it seems to be about a pixel or two short on the left hand side. Looking at the css code the margin: auto for the #small div should center the border in the #content-2 div.
    The #content-2-1 div has a width of 940 pixels plus the two 10 pixels margins so being 960 pixels in total it should just fit in the #content-2 div so I don't know where the mis-alignment is coming from?

    Many thanks.

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 601 Times in 600 Posts
    So it sounds like you got things under control.
    Great.

    Happy coding.
    We be here if help is needed.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    chocko638 (08-23-2013)

  • #13
    New Coder
    Join Date
    Jun 2004
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yep, sort of under control.

    Thanks very much for your time and help, much appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •