SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 2 fluid equal length boxes

    Hi,
    Basically, Ive got two boxes and I want them to be fluid and the same width throughout, but if you try out the code I have you will see that the image which is floated to the right sticks out a bit.

    Here's what I've got:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<link rel="stylesheet" href="css/style.css" type="text/css"/>
    </head>
    
    <body>
    
    <div id="container">
    	<div id="box">
        	<div id="content">
            	<p class="atext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="footer">
            	<span class="floatleft"><a href="">Lorem ipsum</a></span>
                <span class="floatright"><a href=""><img src="images/image.png" alt="image"></a></span>
            </div>
    	</div>
      
    </div>
    
    </body>
    </html>
    and here's the css:

    Code CSS:
    .floatleft {
    	float: left;
    	}
    .floatright {
    	float: right;
    	}
     
    .clear{	
    	clear: both;
    	}
     
    img{
    	border: 0;
    	}
    a img, a:hover img, a:visited img, a:active img {
    	text-decoration: none;
    	vertical-align: bottom;
    	} 
    * {
    	margin: 0;
    	padding: 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	}
    html {
    	height: 100&#37;;
    	width: 100%;
    	}
    body {
    	font-size: 62.5%;
    	}
     
    #container{
    	max-width: 500px;
    	mmin width: 400px;
    	margin: 10px auto;
    	}
     
    #box{
    	width: 100%;
    	float: left;
    	}
    #content{
    	text-align: justify;
    	font-size: 1.2em;
    	line-height: 1.4em;
    	border: 1px solid #000;
    	color: #0066FF;
    	padding:5px;
    	}
    .atext{
     
    	}
    #footer{
    	width: 100%;
    	background: #fff;
    	border: 1px solid #000;
    	border-top: 0;
    	float: left;
    	padding-left:5px;
    	}

    I had managed to get it to look right before in firefox and ie, by removing width:100%; from the footer id, but this then means that everything is squeezed right next to each over in opera and safari.

    BTW I've currently set the max width to 500px for now, but the two boxes should width should be the same at all widths.

    And the only reason why I have floats in the ids is for floating the two spans in the footer with classes floatleft and floatright. Otherwise I have no reason to be floating.

    Secondly, I've got the text-align set to justify in the content id. But why does justify not work when I also include a float left in that id? How can this be overcome?

    Thanks,
    -sk

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I resolved the problem by adding the same amount of padding to the footer as i had done to the content (i.e. padding left and right = 5px).

    But this still doesn't explain why text align justify doesnt work when float left is applied to the same id (i.e. ad float left to content id to see what I mean)

    -sk

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't realloy add padding to inner elements that are 100&#37; wide because 100% is as big as the parent and there isn't any room for any more padding without stretching the parent.

    You didn't need to float the footer and therefore there is no need for the width. You just needed to clear the floats in the footer using either overflow:auto or some other clearing technique.

    In fact you only need to float one element in the footer and then you don't need to worry about clearing.
    Code:
    #footer{
        background: #fff;
        border: 1px solid #000;
        border-top: 0;
        padding-left:5px;
    }
    #footer{text-align:right;}
    Code:
     <div id="footer">
                <span class="floatleft"><a href="">Lorem ipsum</a></span>
               <a href=""><img src="images/image.png" alt="image"></a>
            </div>
    The justify seems to be working so I may have misunderstood what you said.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B... so here's what we have:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<link rel="stylesheet" href="css/style.css" type="text/css"/>
    </head>
    
    <body>
    
    <div id="container">
    	<div id="box">
        	<div id="content">
            	<p class="atext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
    
    		<div id="footer">
    			<span class="floatleft"><a href="">Lorem ipsum</a></span>
    			<a href=""><img src="images/image.png" alt="image"></a>
            </div>
    	</div>
      
    </div>
    
    </body>
    </html>
    And the CSS:

    Code CSS:
    .floatleft {
    	float: left;
    	}
    .floatright {
    	float: right;
    	}
     
    .clear{	
    	clear: both;
    	}
     
    img{
    	border: 0;
    	}
    a img, a:hover img, a:visited img, a:active img {
    	text-decoration: none;
    	vertical-align: bottom;
    	} 
    * {
    	margin: 0;
    	padding: 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	}
    html {
    	height: 100%;
    	width: 100%;
    	}
    body {
    	font-size: 62.5%;
    	}
     
    #container{
    	max-width: 500px;
    	mmin width: 400px;
    	margin: 10px auto;
    	}
     
    #box{
     
    	}
    #content{
    	text-align: justify;
    	font-size: 1.2em;
    	line-height: 1.4em;
    	border: 1px solid #000;
    	color: #0066FF;
    padding:5px;
    	}
    .atext{
    	}
     
    #footer{
        background: #fff;
        border: 1px solid #000;
        border-top: 0;
        padding-left:5px;
    	text-align: right;
    	}

    This works perfectly, EXCEPT for one thing, I need the footer to float right, since I want the max-wdth of #content to be 500px whilst the max-wdth of the #footer to be less at 400px.

    Basically when the content area's width is larger (i.e. 400+px) than that of the footer I want the footer to stick to it's right not to it's default left.

    Here's the updated CSS to show this:


    Code CSS:
    .floatleft {
    	float: left;
    	}
    .floatright {
    	float: right;
    	}
     
    .clear{	
    	clear: both;
    	}
     
    img{
    	border: 0;
    	}
    a img, a:hover img, a:visited img, a:active img {
    	text-decoration: none;
    	vertical-align: bottom;
    	} 
    * {
    	margin: 0;
    	padding: 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	}
    html {
    	height: 100%;
    	width: 100%;
    	}
    body {
    	font-size: 62.5%;
    	}
     
    #container{
    	max-width: 500px;
    	min-width: 400px;
    	margin: 10px auto;
    	}
     
    #box{
     
    	}
    #content{
    	text-align: justify;
    	font-size: 1.2em;
    	line-height: 1.4em;
    	border: 1px solid #000;
    	color: #0066FF;
    	padding:5px;
    max-width: 500px; /*Max width of the content box*/
    	}
    .atext{
    	}
     
    #footer{
        background: #fff;
        border: 1px solid #000;
        border-top: 0;
        padding-left:5px;
        text-align: right;
    max-width: 400px; /*Max width of the footer box*/
    float:right /*Floating it right since I want it to be on the right rather than  the normal left.*/
    	}

    The Problem is when float right is included the width of the the content box and the footer box are not the same when they are both supposed to be the same width (e.g. the footer's max width of 400px), since the footer shrinks in width when you apply float to it.

    Is there a "cure" for this?

    -sk

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If I understand you correctly the you could do something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <style>
    .floatleft {
            float: left;
        }
    .floatright {
        float: right;
        width:100&#37;;
    }
       
    .clear{ 
        clear: both;
        }
     
    img{
        border: 0;
        }
    a img, a:hover img, a:visited img, a:active img {
        text-decoration: none;
        vertical-align: bottom;
        }
    * {
        margin: 0;
        padding: 0;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        }
    html {
        height: 100%;
        width: 100%;
        }
    body {
        font-size: 62.5%;
        }
     
    #container{
        max-width: 500px;
        min-width: 400px;
        margin: 10px auto;
        }
     
    #box{
     
        }
    #content{
        text-align: justify;
        font-size: 1.2em;
        line-height: 1.4em;
        border: 1px solid #000;
        color: #0066FF;
        padding:5px;
    max-width: 500px; /*Max width of the content box*/
        }
    .atext{
        }
       
    #footer{
        background: #fff;
        border: 1px solid #000;
        border-top: 0;
        padding-left:5px;
        text-align: right;
            max-width: 400px; /*Max width of the footer box*/
            float:right /*Floating it right since I want it to be on the right rather than  the normal left.*/
          }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="box">
            <div id="content">
                <p class="atext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="footer"><p class="floatright"><a  href="">Lorem ipsum</a><a  href=""><img src="images/image.png" alt="image"></a>
                </p>
            </div>
        </div>
    </div>
    </body>
    </html>
    (inline styles for example only)

    Basically you float an inner element inside the footer that is 100% wide and floated right. This stretches the footer to the full width. It seems to work in Ie7, Firefox and opera. You will of course have to implement something different for ie6 and under because they don't understand min or max width (see the faq on min-width).


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
  •