d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > How Would You Do > A Website Like That
Add Reply New Topic New Poll
Member
Posts: 6,420
Joined: Jan 27 2008
Gold: 1,327.99
Dec 12 2012 11:55am
Hi everybody, i just have a question, how would you do in css a website like that :



Code
#header { width: 900px; height: 100px; }
#content-left { width: 450px; float: left; }
#content-right { width: 450px; float: right; }
#footer { width: 900px; height: 100px; }


Something like that is correct right ?

This post was edited by ilo on Dec 12 2012 12:00pm
Member
Posts: 13,630
Joined: Dec 4 2009
Gold: 0.00
Dec 12 2012 03:46pm
almost. you don't set heights for elements because if the content is larger, it looks fugly.

HTML

Code
<!DOCTYPE html>
<html>
  <head>
     <title>blah</title>
  </head>
  <body>
     <header></header>
     <section id="left"></section>
     <section id="right"></section>
     <footer></footer>
   </body>
</html>


CSS
Code
/*make sure you do a css reset and set all your borders, paddings, and margins */

body {
  /* you can center it by removing this comment, else it will be left justified
  margin: 0 auto;
  */
  width: 900px;
}

#left, #right {
  width: 450px;
  float: left;
}

#right:after {
  clear: both;
}


Instead of floating both elements to either direction, you make them both float left. Since that will fudge up all element positions after the float, you need to clear the float. Using some CSS3 selectors, you don't need to make an extra element with the "clear" class on it.
Member
Posts: 1,628
Joined: Aug 11 2012
Gold: 628.00
Dec 13 2012 10:15am
what he ^ said.
Member
Posts: 6,420
Joined: Jan 27 2008
Gold: 1,327.99
Dec 13 2012 05:49pm
Quote (BreakPoint @ Dec 12 2012 09:46pm)
almost. you don't set heights for elements because if the content is larger, it looks fugly.

HTML

Code
<!DOCTYPE html>
<html>
  <head>
     <title>blah</title>
  </head>
  <body>
     <header></header>
     <section id="left"></section>
     <section id="right"></section>
     <footer></footer>
   </body>
</html>


CSS
Code
/*make sure you do a css reset and set all your borders, paddings, and margins */

body {
  /* you can center it by removing this comment, else it will be left justified
  margin: 0 auto;
  */
  width: 900px;
}

#left, #right {
  width: 450px;
  float: left;
}

#right:after {
  clear: both;
}


Instead of floating both elements to either direction, you make them both float left. Since that will fudge up all element positions after the float, you need to clear the float. Using some CSS3 selectors, you don't need to make an extra element with the "clear" class on it.


Thanks a lot !
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll