CSS text in a fixed width column help

Discussion in 'Web Design and Development' started by Lau, Aug 29, 2006.

  1. Lau Guest

    #1
    I'm building a site that's effectively one page, that you scroll down to view, and it's a four column grid that sometimes spans four columns (like the header) and sometimes two, and sometimes all four. I'm controlling this with divs, in the code posted below. As it's quite image heavy, I'm making the columns fixed width, as they mostly have images in them that wouldn't wrap.

    It seems to be working fine, until I try to add text. It's 800px wide (in an outer container), and when I use a 600px wide image to replace the text and a 200px image to the right, it's fine. However, if I replace the 600px image with text and 20px padding to the left, 30 px padding to the right, and keep the 200px image to the right (in a seperate floated right div) the text should automatically fill a 550px wide space, right? But no, it pushes the 200px image onto the next line for some reason.

    See images:

    The text is a yellow box 600 px wide here:

    Picture 3.png

    Replace it with text and it pushes the green box down onto the next line:

    Picture 1.png

    Is there a way to force text to only be a certain width? Or what am I doing wrong here? This is driving me absolutely batty, and so thanks so much for any help you can give me here. (Even a pat on the shoulder and telling me everything's going to be all right would be good too :p )

    Here's the code: CSS
    Code:
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    	background-color: #FFFFFF;
    }
    #container {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #header {
    	width: 800px;
    	margin-left: auto;
        margin-right: auto;
    }
    #about {
    	width: 800px;
    	margin-left: auto;
        margin-right: auto;
    }
    #leftAbout {
    	width: 600px;
    	float: left;
    	margin-top: 20px;
    	margin-right: 30px;
    	margin-bottom: 20px;
    	margin-left: 20px;
    }
    #rightAbout {
    	width: 200px;
        float: right;	
    }
    #featured {
    	width: 800px;
    	margin-left: auto;
        margin-right: auto;
    	}
    #leftFeatured {
    	margin-left: auto;
        margin-right: auto;
    	width: 400px;
    	float: left;
    }
    #rightFeatured {
    	margin-left: auto;
        margin-right: auto;
    	width: 400px;
    	float: right;
    }
    #other {
    	width: 800px;
    	margin-left: auto;
        margin-right: auto;
    	}
    #leftOther {
    	margin-left: auto;
        margin-right: auto;
    	width: 400px;
    	float: left;
    }
    #rightOther {
    	margin-left: auto;
        margin-right: auto;
    	width: 400px;
    	float: right;
    }
    #innerleftOther {
    	margin-left: auto;
        margin-right: auto;
    	width: 200px;
    	float: left;
    }
    #innerrightOther {
    	margin-left: auto;
        margin-right: auto;
    	width: 200px;
    	float: right;
    }
    
    And HTML.

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    @import url("test.css");
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="header"><img src="images/testimages/fullwidth.jpg" width="800" height="300"></div>
    	<div id="about">
    			<div id="leftAbout"><img src="images/abouttitle.png"><br>I'm a twenty-six year old recent graduate in graphic design. I recently moved to Edinburgh, and I am currently looking for a position in a design agency in the city. I've completed a work placement at <a href="http://www.redpath.co.uk/">Redpath</a>, and have done some freelance print work. For more information about me, please click here or scroll down. If you like what you see, please get in touch at <a href="mailto:laura@laurabarnard.co.uk">laura@laurabarnard.co.uk</a>.</span></div>
    			<div id="rightAbout"><img src="images/testimages/200column.jpg" width="200" height="300"></div>
      </div>
    	<div id="featured">
    	  		<div id="leftFeatured"><img src="images/testimages/400column.jpg" width="400" height="300"></div>
    			<div id="rightFeatured"><img src="images/testimages/400column.jpg" width="400" height="300"></div>
    		</div>
    	<div id="other">
    	  		<div id="leftOther">
    			<div id="innerleftOther"><img src="images/testimages/200column.jpg"></div>
    			<div id="innerrightOther"><img src="images/testimages/200column.jpg"></div>
    				</div>
    			<div id="rightOther">
    			<div id="innerleftOther"><img src="images/testimages/200column.jpg"></div>
    			<div id="innerrightOther"><img src="images/testimages/200column.jpg"></div>
    				</div>
    		</div>
    </div>	
    </body>
    </html>
    
     
  2. cookie1105 macrumors 6502

    Joined:
    Mar 27, 2006
    Location:
    London, UK
    #2
    Margin and padding are two different things. Google box-model.

    You can keep the margins and make the width 550px:
    Code:
    #leftAbout {
    	[COLOR="Red"]width: 550px;[/COLOR]
    	float: left;
    	margin-top: 20px;
    	margin-right: 30px;
    	margin-bottom: 20px;
    	margin-left: 20px;
    }
    
    Or you can keep the width and define the <p> element. I took the liberty of adding <p> tags to your html:
    HTML
    Code:
    <div id="leftAbout"><img src="images/abouttitle.png">[COLOR="Red"]<p>[/COLOR]I'm a twenty-six year old recent graduate in graphic design. I recently moved to Edinburgh, and I am currently looking for a position in a design agency in the city. I've completed a work placement at <a href="http://www.redpath.co.uk/">Redpath</a>, and have done some freelance print work. For more information about me, please click here or scroll down. If you like what you see, please get in touch at <a href="mailto:laura@laurabarnard.co.uk">laura@laurabarnard.co.uk</a>.[COLOR="Red"]</p>[/COLOR]</div>
    CSS
    Code:
    #leftAbout {
    	width: 600px;
    	float: left;
    	[COLOR="Red"]margin: 0;
    	padding: 0;[/COLOR]
    }
    [COLOR="Red"]#leftAbout p {
    	width: 550px;
    	margin: 20px 30px 20px 20px;
    }[/COLOR]
    
     
  3. Lau thread starter Guest

    #3
    cookie1105, thanks so much. You have literally made my whole night. I was getting in such a mess and getting so annoyed that I just couldn't see a way out.

    I just added it in and it works really well. Thanks again, I really appreciate it. :)
     
  4. cookie1105 macrumors 6502

    Joined:
    Mar 27, 2006
    Location:
    London, UK
    #4
    It's a pleasure Lau. I was only sitting fiddling with my own css nightmare anyway.
    I sounds like it's going to be a portfolio site. Good luck with it, let us know when it goes live. I'd really like to see some of your design work.
     
  5. Lau thread starter Guest

    #5
    Thanks, I will do. Good luck with your CSS (I'd offer to help, but I suspect, as you can probably tell from the above) that I'm vastly underqualified to inflict my dodgy code on anyone..!). Hope you work it out, and thanks again. :)
     

Share This Page