CSS and div help please

**graphico** · 08-21-2009 12:00 PM

Hey do any of you guys know where im going wrong with this code i thought i was doing ok with creating the web page in CSS, i viewed it on a screen with res 1152 x 864 and it was fine.

Then viewed it on 1280 x 800 screen res and the 1st paragraph of text spills out of the div area.

please help hope it a simple adjustment, code is:->>

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>testtext :: having a go at dfivs</title>
<style type="text/css">
<!--
#container #header {
    color: #0033CC;
}
#container {
    color: #010000;
    background-color: #FFFFFF;
    padding: 50px;
}
#leftcolumn {
    width: 400px;
    float: left;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
#rightcolumn {
    width: 250px;
    float: right;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
.clear { clear: both;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-weight: lighter;
    font-size: 17px;
}
.design {
    color: #FFFFFF;
}
body {
    margin-left:15%;
    margin-right: 15%;
    background-color: #e17333;
}
a:link {
    text-decoration: none;
    border: 0;
    color: #44372D;
}
a:visited {
    border: 0;
    text-decoration: none;
}
a:active {
    border: 0;
    text-decoration: none;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
    font-size: 13px;
}
.brown {
    color: #403831;
}
.organge {
    color: #E17333;
}
h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: #E17333;
    font-weight: normal;
    font-size: 25px;
    line-height: 27px;
}
a:hover {
    color: #C1B0A2;
}
#header {
    background: #403831;
    width: 444px;
    float: left;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    height: 231px;
    padding-right: 70px;
    font-weight: lighter;
}
#navigation {
    width: 162px;
    float: right;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    height: 231px;
}

-->
</style>
</head>

<body>
<div id="container">
  <div id="header"><img src="http://forums.x10hosting.com/images/missing" alt="header here" width="444" height="231" /></div>

  <div id="navigation">
    <h2 class="brown">SERVICES 1<br />
      <span class="organge">SERVICES 2</span><br />      
      SERVICES3<br />
      <span class="organge">SERVICES 4<br />
      </span>      SERVICES 5<br />

      <span class="organge">SERVICES 5 </span>SERVICE 6<span class="organge"><br />
      </span>& MORE </h2>
  </div>
  <div id="article">
    
    <h1>This is the amount of text i will be putting here. Problem is it spills out of it intended div area when view on a screen 1280 x 800 res.</h1>
    <p>a bit of text about the site what its for band where is going blah blah blah a bit of text about the site what its for band where is going blah blah blah a bit of text about the site what its for band where is going blah blah blah a bit of text about the site what its for band where is going blah blah blah a bit of text about the site what its for band where is going blah blah blah de end </p>
  </div>
 <div class="contact" id="leftcolumn">   
   <h2><span class="organge">TELEPHONE</span> <span class="brown">00000 000 000<br />
  </span><span class="organge">EMAIL </span><span class="brown"><a href="mailto:something@hotmail.com">something@hotmail.com</a></span> <span class="organge"><br />
    WEB</span> <span class="brown">[url]WWW.FACEBOOK.COM[/url]   </span></h2>

 </div>
 <div class="organge" id="rightcolumn">
   <h2 class="design">text </h2>
 </div>
 <div class"clear"></div>

 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>

</div>
</div>
</body>
</html>

**xav0989** · 08-21-2009 12:35 PM

Could you provide a link to the page on your website. And also could you wrap the code with the [ HTML] [ /HTML] tags (remove spaces).

**graphico** · 08-21-2009 12:52 PM

cool did'nt know i could do that i dont have a link to the page at the moment i just viewed it locally:dunno:

**xav0989** · 08-21-2009 01:10 PM

ok I'll try to see what I can do.

There is also [ CODE] [ /CODE] for generic code and [ PHP] [ /PHP] for php code
Edit:
here is a screenshot of your page, could you point out any problem?

I believe this is what you want to achieve:

**graphico** · 08-21-2009 01:20 PM

thats it great! the 2nd screen shot is what i was after so where did i go wrong?

**xav0989** · 08-21-2009 01:26 PM

I added a simple rule to your css. it's the clear: both attribute. what it does is it reset the float right and float: left behavior.

Code:

#article {
    clear: both;
}

BTW, you should add some padding between the article and the rest of the top of the page. Here is the css with the padding. You can change the value as you want, but between 5px and 10px should be good.

Code:

#article {
    clear: both;
    padding-top: 10px;
}

**graphico** · 08-21-2009 01:38 PM

cheers, grateful for your help and advice on this. I still have a little trouble fully understanding what the 'clear' attribute does but i will have a play with it.

think i owe you some credits not sure how this works either.

**misson** · 08-21-2009 03:29 PM

Reference: CSS 2.1 'clear' property. Basically, "clear" moves a box below floats. The exception is that if a cleared box is inside a float, it doesn't clear anything outside the float.

HTML Code:

<style type="text/css">
body { counter-reset: left right clearBoth clearRight clearLeft; }
div {
  padding: 1em;
  margin: 1em;
  border: 1px solid black;
  background-color: #BBB; 
}
.wrap { width: 20em; }
.left { float: left; background-color: #FFB; }
.right { float: right; background-color: #BFF; }
.clearLeft { clear: left; background-color: #F88; }
.clearRight { clear: right; background-color: #88F; }
.clearBoth { clear: both; background-color: #F8F; }
.left:after {content: "Left " counter(left); counter-increment: left; }
.right:after {content: "Right " counter(right); counter-increment: right; }
.clearBoth:after { content: "Clear both " counter(clearBoth); counter-increment: clearBoth; }
.clearLeft:after { content: "Clear left " counter(clearLeft); counter-increment: clearLeft; }
.clearRight:after { content: "Clear right " counter(clearRight); counter-increment: clearRight; }

</style>

<div class="left"></div>

<div class="wrap left">
    <div class="left"></div>
    <div class="right"></div>
    <div>Uncleared</div>
    <div class="clearBoth"></div>
</div>

<div class="left"><div class="clearBoth"></div></div>

<div class="wrap left">
    <div class="left"></div>
    <div class="clearRight"></div>
    <div class="right"></div>
    <div class="clearLeft"></div>
</div>