CSS - What Is Wrong With This Layer? Cant Get It To Extend Downward.

Hi,

I like to know how to extend an existing class.

.footertext50per
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 3px;
WIDTH: 50%;
COLOR: #c1cfe9;
PADDING-TOP: 1px;
}

.footertext50perleft
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 3px;
WIDTH: 50%;
COLOR: #c1cfe9;
PADDING-TOP: 1px;
TEXT-ALIGN: left
}

As you see in the second class "footertext50perleft", the only difference with respect to the first class "footertext50per" is the 'text-align'. This lead to duplication of coded.

I like to know whether it is possible to extend "footertext50per" to "footertext50perleft" and just define the additions or modifications only.

Thanks.

I have a DIV which I have set the height to 100%. I understand that height: 100% means that it will fit up to 100% of the viewable screen area.

How would I define it so that it expands to fit 100% of the content area? Meaning that if the content scrolls more than 100% of the height of the screen, the background will stretch to fit the whole content height.

The URL with an example of the site I'm working on is: http://hawaiihomebrew.com/os_comm/index.php?cPath=50_51 The site is not complete so please bare with some of the broken images and all that. When my products extend beyond the height of the screen the white background stops at the point before you have to start scrolling and I want it to extend the whole height of the content.

My css is below. The right_col class is the one that contains the content in question.

Code:

  /* CSS Document */
body {
  font-family:Geneva, Arial, Helvetica, sans-serif;
  color: #000000;
  font-size: 80%;
  background-color: #ffffff;
  margin: 0px 0px 0px 0px;
  background-image: url(../images/hw_back.gif);
}

#left_col {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px 10px 10px 10px;
  height: 100%;
  width: 18%;
  background-color: #63782B;
  background-image:url(../images/hw_back.gif);
}

#right_col {
  position: absolute;
  top: 0px;
  left: 18%;
  height: 100%;
  width: 82%;
  background-color:#FFFFFF;
}

#cart_rt {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px 10px 10px 10px;
  height: auto;
  width: 35%;
  text-align: right;
}

#cart_lt {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px 10px 10px 10px;
  height: auto;
  width: 35%;
  text-align: left;
}

#content {
  position: absolute;
  top: 20px;
  left: 0px;
  padding: 10px 10px 10px 10px;
  height: auto;
  width: 100%;
}

Hello, I have been working on this for over 2 days and learning plenty in the process. Yet, I have come to a roadblock. I need the footer, which is outside the main container, to extend to the height of the page. The problem is that the page height changes with each page, and will change in the future, as the info for the pages will be pulled from a database.

Please have a look at the footer on my site and tell me what might be a good solution. Here's the site: http://www.caillouette.com/FriendsCSS2/index.php

thanks
-Sean

I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance.

hxxp://adrian.briansykes.netau.net/

Hi All,


Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal!

Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic.

Now I have designed an overlay for my site:

http://www.wellandpower.net/website2/index.php

The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div.

The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF.

Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange.

CSS Code:
Original - CSS Code #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align: center; z-index: 1000; background-image:url(/images/checkerboard.png); } #overlay #overlayholder { margin-top: 50px; padding: 10px; width: 850px; text-align: center; background-color: #FFFFFF; }

  

 #overlay {


      visibility: hidden;


      position: absolute;


      left: 0px;


      top: 0px;


      width:100%;


      height:100%;


      text-align: center;


      z-index: 1000;


      background-image:url(/images/checkerboard.png);


 }


 #overlay #overlayholder {


     margin-top: 50px;


     padding: 10px;


     width: 850px;


     text-align: center;


     background-color: #FFFFFF;      


 } 

Any help greatly appreciated.

Hi guys,

I'm having a real problem with CSS on this page.

The page views fine in IE, but in firefox I cannot get the green box (div id=maincontent) to extend down to the bottom of the black box... as you can see the black box simply flows out. The green box is extending down to the bottom of the white box, but it stops there. Can anyone think of any obvious ways to fix this?

I tried placing a clear:both div at the bottom of main content (which is the red bar you can see) , but that too only actually clears the white box, not the black one.

Here's the main bits of css...

Code:

#maincontent
{
  position:relative;
  width:762px;
  margin-top:0px;
  background-image:url(contentbkg.jpg);
  background-repeat:no-repeat;
  padding-top:10px;
  text-align:left;
}

#left
{
font-size:12px;
color:#FFFFFF;
float:left;
margin-left:5px;
margin-top:10px;
}

#right
{
color:#FFFFFF;
float:right;
margin-right:10px;
margin-top:10px;
position:absolute;
#position:relative;
}

#translucentblack {
   width: 150px; 
   float:right;
   background-color: #000000; 
   filter:alpha(opacity=40);
   -moz-opacity:0.4;
   opacity: 0.4;
    font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:5px;
}

#opaqueblack {
   width: 150px;     
   background-color: transparent;   
   float:right; 
   position:absolute;
   margin-left:592px;
   #margin-left:22px;         
   z-index: 2;    
   font-family:Verdana, Arial, Helvetica, sans-serif;   
   padding:5px;       
}

#translucentbkg {
	color:#FFFFFF;
	font-size:12px;
   width: 566px; 
   background-color:#FFFFFF ;
   filter:alpha(opacity=80);
   -moz-opacity:0.8;
   opacity: 0.8;
	padding:5px;
	text-align:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#opaquetext 
{
color:#006600;
font-size:12px;
   width: 566px;     
   background-color: transparent;    
   position:absolute;       
   z-index: 2;    
   padding:5px;         
   text-align:left;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}

basically left and right sit inside maincontent, then opaquetext and translucentbkg sit inside left, whilst opaqueblack and translucentblack sit inside right! phew

The reason for opaque and translucent divs is that I'm using mozilla's tip here http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background

mirroring content and positioning one div over another to get semi transparent backgrounds.

Hope that all made sense... any help would be incredible!!!

thanks!

I have a 3 column layout. Each column may contain one or two articles with a border at the bottom of each article. The There are two borders between the three columns.

I'm trying to use floated divs as containers for each of the columns, with a left-hand border in the center and right columns.

You can see a non-css example at: http://www.sananselmopreschool.org/pilot/

Well, no matter what I do, I haven't been able to get the column containers to extend to the bottom of the page in IE. If I set them to height:100%, they seem to shoot out to 150% or so.
body {
height:100%;
padding:0;
margin:0;
background-color:#ECF6DD;
font-family: Tahoma;
font-size: 11px;
color: #707070;
text-align:center;
border: 1px solid purple;
}

.body_container {
position: relative;
height:100%;
width:100%;
left: 0px;
border: 1px groove darkred;
}
.body_position_center {
height:100%;
position:relative;
width:780px;
margin-right: auto;
margin-left: auto;
border-collapse:collapse;
border: 1px solid #999 ;
}

.header {
padding:0;
margin:0;
position:relative;
width:766px;
height:195px;
}

.leftblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}

.centerblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.rightblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.blockcontents
{
padding-top:14px;
padding-bottom:14px;
border-bottom : 3px dotted #228B22;
text-align:left;
}

Any suggestions would be appreciated. I haven't used much javascript, so unless I can see an example, it might be tough to work out a javascript solution.

is it possible?

its the banner...

the content spans around 1000 pixels wide so with 100% width i miss a piece when i scroll to right of page

just making the body around 1000 pixels seems to get a horizontal scrollbar when its not needed for the content....either that or its just missing some pixels...

cant a div be 100% of the page?

I'm wanting to extend a div all the way to the bottom of the page to give the effect of a white column. How can I make it extend all the way to the bottom if the content is too short to make it do this?

The example is at http://www.wattersisere.co.uk/devshed.

Thanks,

Watters

I'm currently working on a page that has a 3-column layout. The layout is fine as along as the content of the columns doesn't extend passed its given width.

Is there a way to have the text either wrap or extend without extending the div it's in.

I have attached a pic of what's happening (this is only when I get errors, the rest of the content doesn't extend the div). Is there a way to hide the text that goes beyond the div width?

CSS
Code:

/* columns */
#lcol {
  float: left;
  width: 190px;
  vertical-align: top;
}
#mcol {
  float: right;
  width: 350px;
  padding-right: 10px;
  vertical-align: top;
}
#rcol {
  float: right;
  width: 200px;
  vertical-align: top;
}
/* gray box */
.gray_box_frame
{
  background-color: #fff;
  border: solid 1px #404040;
  width: 100%;
  padding: 0px;
  margin: 3px 0px 3px 0px;
}

.gray_box_head
{
  height: 18px;
  background-color: #404040;
}
.gray_smm,
.green_smm
{
  display: inline;
  float: right;
  height: 18px;
  cursor: pointer;
}
.gray_box_content,
.green_box_content
{
  margin: 0px;
  padding: 5px;
}

Hello, I have a header which extends to 100% the width of the browser. I am trying to get the footer to do the same but it's only about 90% the browser's width.
Here's my CSS for the footer: Code:

#footer { 
	width:100%;  /* this will create a container 80% of the browser width */
	background: #327ec1;
	margin: 0 0 0 -38; /* the auto margins (in conjunction with a width) center the page */
	border: 0px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height:120px;
} 

#footer_container { 
	width:950px;  /* this will create a container 80% of the browser width */
	background: #327ec1;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0 px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height:120px;
}

the site ishere

any ideas?
thanks

Greetings,

I have the following in a style sheet:

Code:

.nameColumn {
width: 200px;
}

.groupColumn {
width: 100px;
}

.statusColumn {
width: 682px;
}

In the body of the page, I have table rows like this:

Code:

<tr>
<td class=nameColumn>foo</td>
<td class=groupColumn>bar</td>
<td class=statusColumn>foobar</td>
</tr>

Even though I have declared widths, they show up differently on Windows IE7 than on Mac Safari. In IE, the "statusColumn" column falls short of the right edge of the window. Is there a way, with the width property, to make the rightmost column automatically stretch to the right edge of the browser window?

If I use width:auto, it makes the cell only as wide as the text it contains.

Thanks!!
DM

Hello,

In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning?

Thanks,

Andy

Well, I'm trying to make a comments-page for a certain thing, and I can't get the image to stop going over the bottom of the div, without using the min-height property. Can someone help? Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" />
	<title>Comments on 2005-02-10: February 10, 2005</title>\n
	<link rel="stylesheet" type="text/css" href="comments.css" />
</head>
<body>
	<h2>Posting on 2005-02-10: February 10, 2005 in <a href="refresh.php" id="title">XMLBlog</a></h2>
	 
<div id="entry" xml:lang="en-US" lang="en-US">

	<img src="../resources/images/Neil_Euphonium_3_[F][S{600,h}][32k].png" alt="New Euphonium!" title="New Euphonium!" style="width:30%;" class="left" />
	<p class="dream">I can only remember two things...  That there were a whole bunch of people from my school playing baritones, which was kind of creepy in this case <em class="entry">and</em> that my section from school in real life and I played this freaky, nonexistent Zelda games.  One was for a calculator I had only owned in the dream, and it was spectacular!
	</p>
	<p class="normal">I brought my "newphonium" to school today.</p>
	<p class="normal">We had a pretty normal session in Jazz.  <em class="entry">Someone actually got a trombone solo.</em></p>
	<p class="normal">Our teacher was back.  The entire first half of the period going over our homework.  <em class="entry">We learned that dropping a penny off of the <strong class="entry">Space Needle</strong> is very dangerous, since even a baseball would get going at 120 MPH.</em>  Later, we began how to calculate things dealing with gravity with a position other than 0 and a velocity over 0.</p>

	<p class="happy">We didn't do much in Japanese.  All we really did was read Katakana and finish our puzzle.  <em class="entry">A few of us found new words.</em>  I also told our sensei that my real Japanese same from my ancestors is <ruby><rb>たけした</rb><rt>take****a</rt></ruby>.  During resource, I looked over this book with a couple of friends of mine and their friend.  <em class="entry">It was so funny, too!</em></p>
	<p class="normal">In Health, we continued our lecture on alcohol.  <em class="entry">There were some inspiring articles and poems on the subject.</em></p>
	<p class="happy"><span class="normal">Class started off with a lock-down.  <em class="entry">I used this time to complete a gravity-based program for physics.</em></span> to Due to my premature completion of the paragraph that was due at the end of the period, I just listened to music and read for the majority of English.  <em class="entry">A big guy in the <info popup="State of Fear">book I'm reading</info> died.</em></p>

	<p class="sad">Before actually eating, I wandered a bit.  <em class="entry">It made it so I didn't have to carry my backpack around wherever I went.</em></p>
	<p class="normal">We continued on proofs.  <em class="entry">It took a bit of effort to do.</em>  <span class="happy">Still, we finished the investigation.</span></p>
	<p class="normal"><span class="happy">I got my new euphonium for class.<em class="entry">It sounded very nice.</em></span>  Though, for a majority of the time I didn't do anything with my section, due to his preoccupation with a couple of other kids.</p>
	<p class="happy">I got a ride home</p>

	<p class="normal">I had a practice session with my mom, which wasn't the most successful.</p>
	<p class="happy">Once done with my homework, I took a two-hour nap.</p>
	<p class="dream">The entire thing revolved around this country area that had tiny roads and a <info popup="The salmon eggs would get bigger, then would grow spikes and split apart before returning to their grating to mature more">freaky salmon farm</info>.  Also, I remember psychically communicating with my section from Band.  <span class="hider">I actually cried over the idea of losing him, but I didn't have tears when I awoke.</span>  Also, my old friend, who is a freshman now, was mentioned.</p>
	<p class="happy">The dream gave me the idea to call him up.  <em class="entry">Apparently, the call woke him up.</em>  We talked about how our lives were going, along with school.  <em class="entry">Apparently, the school banned people from using their calculators.  How could they!?  He also told me that some kids were goofing around during Breakout library time.</em>  We scheduled a time to meet and talk about some more things.  <em class="entry">I could show him Linux.</em></p>

	<p class="happy"><strong class="entry">I fixed the comments system!!</strong>  <em class="entry">Have fun posting.</em></p>
</div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 10, 2005&date=2005-02-10" method="post" name="comment" id="main">
	<div class="right">
		<img src="comments_files/right_main_bar.png" alt="right_side" />
	</div>
	<div class="left">
		<img src="comments_files/left_main_bar.png" alt="left_side" />

	</div>
	<div class="center">
		Date: <input type="textarea" class="upper" name="date" value="2005-02-10" readonly="readonly" />
		Title: <input type="textarea" class="upper" name="title" value="February 10, 2005" readonly="readonly" />
		<br />
		Name: <input type="textarea" name="name" class="lower" />
		E-mail: <input type="textarea" name="e-mail" class="lower" />

	</div>
	<div class="comment">
		<input type="textarea" name="comment" class="text" />
		<input type="submit" value="Post!" class="click" />
	</div>
</form>
</body>
</html>

CSS: Code:

h2 {
	text-align:center;
	font:bold italic 3em/1.5 'Pepita MT', 'Lucida Handwriting', 'Sans-Serif';
	color:rgb(0,150,150);
}
h3 {
	text-align:center;
	font: italic normal 2em/1.5 'Lucida Calligraphy', 'Sans-Serif';
	color:rgb(0,0,150);
}
form#main {
	display:block;
}
form#main div.left {
	float:left;
	background-color:rgb(255,255,255);
}
form#main div.right {
	float:right;
	background-color:rgb(255,255,255);
}
form#main div.left img, form#main div.right img {
	height:60px;
}
form#main div.center {
	background-color:rgb(0,0,0);
	background:url(comments_files/center_main_bar.png);
	font:bold normal 1em/1 'Times New Roman', 'Courier New', 'Sans-Serif';
	color:rgb(255,255,255);
	padding:2px 18% 2px 28%;
}
form#main div.center input.upper {
	height:20px;
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	display:inline;
	width:20%;
	margin:2px 10% 2px 0;
}
form#main div.center input.lower {
	height:20px;
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	display:inline;
	width:20%;
	margin:2px 8% 2px 0;
}
form#main div.comment {
	width:95%;
	border:1px solid rgb(0,150,150);
}
form#main div.comment input.text{
	width:90%;
	margin:5px 5% 5px 5%;
	height:100px;
}
form#main div.comment input.click {
	width:25%;
	margin:5px 37.5% 5px 37.5%;
}
body p {
	text-align:justify;
	font: italic normal 1.2em/1 'MS Mincho', 'SimSun', 'Sans-Serif';
	color:rgb(150,0,0);
}
a {
	color:rgb(0,100,0);
	text-align:left;
}
a:hover {
	font-weight:bold;
	color:rgb(0,255,0);
	border:1px solid rgb(0,255,0);
}
a#title {
	color:rgb(0,100,0);
	text-decoration:none;
	margin-left 25%;
	text-align:left;
}
a#title:hover {
	font-weight:bold;
	color:rgb(0,255,0);
	border:1px solid rgb(0,255,0);
}
div.comment a.mail {
	font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
	color:rgb(0,100,0);
	text-decoration:none;
	text-align:left;
}
div.comment a.mail:hover {
	font-weight:bold;
	color:rgb(0,255,0);
	border:1px solid rgb(0,255,0);
}
div.comment span.mail {
	margin-left 25%;
	font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
	color:rgb(0,0,150);
	text-align:left;
}
div.comment {
	border-bottom:2px dotted rgb(0,0,255);
	margin:1.5em;
}
div.comment p {
	font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
	display:block;
}

/* ENTRY */
div#entry {
	border:4px double rgb(0,0,0);
	padding:0.25em;
	margin:0.5em;
	min-height:79em;
}
div#entry p {
	font:normal normal 1em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
	text-indent:2em;
	text-align:justify;
}
div#entry p.dream {
	font:normal normal 1em/1.2 'Lucida Handwriting', 'URW Chancery L', 'Serif';
	color:rgb(150,150,0);
	text-indent:2em;
	text-align:justify;
}
em.entry {
	font-style:italic;
}
strong.entry {
	font-weight:bold;
}
span.uentry {
	text-decoration:underline;
}
span.hider {
	color:rgb(255,255,255);
}
div.story {
	border-left:2px solid rgb(0,0,0);
	border-top:2px solid rgb(0,0,00;
}
div.story div.title {
	border-bottom:1px solid rgb(128,128,128);
	border-right:1px solid rgb(128,128,128);
	font:italic normal 1.5em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
	width:50%;
	text-align:center;
}
div.story div.storybody {
	padding:0.25em;
}
span.happy, p.happy {
	color:rgb(0,100,0);
}
span.sad, p.sad {
	color:rgb(0,0,100);
}
span.normal, p.normal {
	color:rgb(100,0,0);
}
img.center {
	margin:0.25em auto;
}
img.right {
	float:right;
	margin:0.25em;
}
img.left {
	float:left;
	margin:0.25em;
}

Hey everyone,

I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code:
html4strict Code:
Original - html4strict 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=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html>

  

 <!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=iso-8859-1" />


   <meta http-equiv="Content-Style-Type" content="text/css" />


   <meta http-equiv="Content-Script-Type" content="text/javascript" />


   <title></title>


   <style type="text/css">/* <![CDATA[ */


   * { padding: 0;


       margin: 0;


     }


   body {


    background-color: #6AB2DA;


    color: #000000;


    text-align: center;


    font-size: 13px;


    font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */


   }


   a {


    color: #6AB2DA;


   }


   a:focus {


    outline: 0 none;


   }


   #container {


    margin: 0 auto;


    text-align: justify;


    width: 50%;


   }


   #page {


    background-color: #FFFFFF;


   }


   #header {


    background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg );


    background-position: bottom left;


    height: 120px;


    width: 100%;


   }


   #header span {


    padding-left: 150px;


    padding-top: 50px;


    font-size: 21px;


    font-weight: bold;


    letter-spacing: -0.1em;


    color: #666666;


    display: block;


   }


   #menu {


    background-color: #6DC3DE;


    width: 100%;


   }


   #menu li {


    float: left;


    padding-top: 10px;


    padding-bottom: 11px;


    list-style-type: none;


   }


   #menu a {


    background-color: #6DC3DE;


    padding: 10px 20px;


    boreder: 2px solid transparent;


    color: #000000;


   }


   #news {


    clear: both;


    margin-top: 34px;


    overflow: auto;


    padding: 15px;


    height: 100px;


    border-bottom: 1px solid #0AA;


   }


   #news h1 {


    color: #6DC3DE;


    font-size: 21px;


   }


   #content {


    margin-top: 15px;


    padding: 15px;


   }


   #content h2 {


    padding-top: 10px;


    float: left;


    color: #6DC3DE;


    padding-right: 25px;


    font-size: 31px;


    border-right: 3px solid #6DC3DE;


   }


   #content .info {


    padding-top: 10px;


    padding-left: 25px;


    float: left;


    font-size: 11px;


    height: 31px;


   }


   #content p {


    text-indent: 45px;


    clear: both;


    border-bottom: 1px dotted #6DC3DE;


    padding-top: 10px;


    padding-bottom: 10px;


   }


   #bottom {


    border-top: 1px solid #6DC3DE;


    margin-top: 10px;


    padding: 5px;


   }


   #bottom ul#one {


    float: left;


   }


   #bottom ul#two {


    float: right;


   }


   #bottom li {


    padding-top: 10px;


    padding-bottom: 11px;


    list-style-type: none;


    display: block;


   }


   #bottom a {


    background-color: #6DC3DE;


    padding: 10px 20px;


    boreder: 2px solid transparent;


    color: #000000;


    display: block;


    width: 250px;


   }


   .clearfix:after {


     content: "."; 


     display: block; 


     height: 0; 


     clear: both; 


     visibility: hidden;


    }


   .clearfix {display: inline-block;}


   /* Hides from IE-mac \*/


   * html .clearfix {height: 1%;}


   .clearfix {display: block;}


   /* End hide from IE-mac */


   /* ]]> */ </style>


  </head>


  <body>


   <div id="container">


    <div id="page">


     <div id="header"><span>i.love.summer</span></div>


     <div id="menu">


      <ul>


       <li><a href="">asdfasf</a><li>


       <li><a href="">asdfasf</a><li>


       <li><a href="">asdfasf</a><li>


       <li><a href="">asdfasf</a><li>


       <li><a href="">asdfasf</a><li>


       <li><a href="">asdfasf</a><li>


       <li><a href="">asdfasf</a><li>


      </ul>


     </div>


      <div id="news">


       <h1>welcome</h1>


      Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. 


      Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. 


      </div>


      <div id="content">


       <h2>I rock</h2>


       <div class="info">


       author: BlackNine<br />


       date: Today<br />


       cat: eventually, right now I want a horse


       </div>


       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet.


  


 Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p>


       <h2>I rock</h2>


       <div class="info">


       author: BlackNine<br />


       date: Today<br />


       cat: eventually, right now I want a horse


       </div>


       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet.


  


 Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p>


      </div>


      <div id="bottom">


       <ul id="one">


       <li><a href="">asf</a></li>


       <li><a href="">asf</a></li>


       <li><a href="">asf</a></li>


       <li><a href="">asf</a></li>


      </ul>


       <ul id="two">


       <li><a href="">asf</a></li>


       <li><a href="">asf</a></li>


       <li><a href="">asf</a></li>


       <li><a href="">asf</a></li>


      </ul>


      </div>


      <div class="clearfix"></div>


      </div>


   </div>


  </body>


 </html> 

Any suggestions would be great.