CSS and div help please

graphico · Aug 21, 2009

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 [FONT=&quot]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:

<!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>

[/FONT]

xav0989 · Aug 21, 2009

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 · Aug 21, 2009

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 · Aug 21, 2009

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 · Aug 21, 2009

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

xav0989 · Aug 21, 2009

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 · Aug 21, 2009

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 · Aug 21, 2009

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:

<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>

xav0989 · Aug 21, 2009

Anyways, graphico, it was a pleasure to help you out!

graphico · Aug 22, 2009

Thanks again, worked a treat.

CSS and div help please

graphico

New Member

xav0989

Community Public Relation

graphico

New Member

xav0989

Community Public Relation

graphico

New Member

xav0989

Community Public Relation

graphico

New Member

misson

Community Paragon

Attachments

xav0989

Community Public Relation

graphico

New Member

Free Web Hosting

Our Community

Legal