SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    XHTML layout problem (floats and borders)

    Hi,

    I was working on what I expected to be a 1 houre job but I should have know better since it involved XHTML & CSS

    First, thr page I'm talking aout can be found at http://percept.be/layoutproblem/

    # Problems in IE6 (havn't tested other IE versions yet):
    - border from content-wrapper div not showing above the content but underneath it.
    - can't get the content-right div aligned next to the content-left part

    # Problems in Firefox 0.9
    - border from content-wrapper div shows correct above the content but doesn't show the border underneath the content.
    - can't get the content-right div aligned next to the content-left part

    I hope someone can help me ... before anyone might suggest, positioning the content-right div absolute does'nt work either , not in IE at least.
    IE seems to have problems with right: 0



    >> Here's the relevant XHTML:
    Code:
     	<div id="contentwrapper">
     
     		<div id="content-left">
     		<h1>Damn Internet Explorer !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
     		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     		<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of  (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. </p>
     		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     		<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of  (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. </p>
     		</div>
     
     		<div id="content-right">
     		<p>work damned</p>
     		</div>
     
     	</div>

    >> Here's the relevant CSS:
    Code:
     #contentwrapper {
     display: block;
     border-style: solid;
     border-color: #BDBDBD;
     border-width: 3px 0 1px 0;
     background-color: #F5F4F0;
     }
     
     #content-left {
     float: left;
     margin: 0 270px 0 0;
     padding: 0 15px;
     background-color: #FFF;
     border-right: 1px solid #BDBDBD;
     }
     
     #content-right {
     float: right;
     width: 253px;
     padding: 0;
     margin: 0;
     border: 1px solid black;
     background-color: #F5F4F0;
     }


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

    Not entirely sure what you are trying to do but you really need to give your floats a width in order to work cross browser.

    However your left content doen't need to be floated if your right content is floated first. It will just wrap around the float and stay clear with the margin you gave it.

    Ie occasionally has problems shoing borders and there are a couple of hacks that nearly always work. Ther are either position:relative or height:1% (where no height is evident). The height 1% should be hidden from other browsers with a suitable ie hiding technique such as the star selector hack.

    Not sure if this is exactly what you wanted but you can take it from here.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
    		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="author" content="Agilis BVBA" />
    <meta name="keywords" content="nog in te vullen" />
    <meta name="description" content="Blog over website toegankelijkheid gebruiksvriendelijkheid XHTML / CSS zoekmachines en nog vanalle andere website en internet gerelateerde onderwerpen." />
    <style type="text/css">
    body {
    background: #FFF;
    margin: 0;
    padding: 0;
    font-size: 70%;
    font-family: tahoma, arial, verdana;
    }
    p {
    margin: 0;
    padding: 10px 0 5px 0;
    line-height: 150%;
    color: #464646;
    }
    h1 {
    font-family: arial, tahoma, verdana;
    font-size: 155%;
    color: #BE0000;
    padding: 0;
    margin: 15px 0 0 0;
    }
    #header {
    height: 45px;
    background: #000B51 url("http://percept.be/layoutproblem/background-header.gif") repeat-x top left;
    }
    #menu {
    height: 26px;
    line-height: 26px;
    padding: 0 0 0 15px;
    background-color: #E7E6E1;
    border-style: solid;
    border-color: #000735;
    border-width: 1px 0;
    }
    #banner {
    height: 128px;
    padding: 0;
    border-bottom: 1px solid #FFF;
    background: #000B51 url("http://percept.be/layoutproblem/background-banner.gif") repeat-x top left;
    }
    #underbanner {
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 15px;
    background-color: #E9E8E3;
    border-style: solid;
    border-color: #FFF;
    border-width: 2px 0 1px 0;
    }
    #contentwrapper {
    border-style: solid;
    border-color: red;
    border-width: 3px 0 1px 0;
    background-color: #F5F4F0;
    }
    #content-left {
    margin: 0 270px 0 0;
    padding: 0 15px;
    background-color: #FFF;
    border-right: 1px solid #BDBDBD;
    }
    * html #content-left {height:1%}/* for ie*/
    #content-left h1 {margin-top:0}
    
    #content-right {
    float: right;
    width: 253px;
    padding: 0;
    margin: 0;
    border: 1px solid black;
    background-color: #F5F4F0;
    }
    .clear {
     clear:both;
     height:1px;
     overflow:hidden;
     margin-top:-1px;
    }
    </style>
    <title>Layout problem</title>
    </head>
    <body>
    <div id="header">&nbsp;</div>
    <div id="menu">menu</div>
    <div id="banner">&nbsp;</div>
    <div id="underbanner">&nbsp;</div>
    <div id="contentwrapper"> 
      <div id="content-right"> 
    	<p>Right content</p>
    	<p>Right content</p>
    	<p>Right content</p>
    	<p>Right content</p>
      </div>
      <div id="content-left"> 
    	<h1>heading !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
    	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    	  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    	  when an unknown printer took a galley of type and scrambled it to make a 
    	  type specimen book. It has survived not only five centuries, but also the 
    	  leap into electronic typesetting, remaining essentially unchanged. It was 
    	  popularised in the 1960s with the release of Letraset sheets containing 
    	  Lorem Ipsum passages, and more recently with desktop publishing software 
    	  like Aldus PageMaker including versions of Lorem Ipsum.</p>
      
      </div>
      <div class="clear"></div>
    </div>
    </body>
    </html>
    You also needed to clear the float.
    Hope that helps.

    Paul

  3. #3
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Paul !



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
  •