2 Replies - 600 Views - Last Post: 05 April 2013 - 03:20 AM

#1 Geeky_Olivia  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 5
  • Joined: 04-April 13

How do I change my CSS to get my columns to be the size height?

Posted 05 April 2013 - 02:07 AM

I currently have this HTML.

<body>
<div id="wrapper">
  <div id="header"> Monster Byte Apps    James Austin (N0376022)  </div>
  <div id="navigation"><ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Feedback</a></li>
		<li><a href="#">Contact</a></li>
		</ul></div>
  <div id="content"><p>Content for  id "content" Goes Here  </p></div>
  <div id="advert"><p>Content for  id "advert" Goes Here  </p></div>
  <div id="footer">Footer</div>
</div>
</body>




My CSS is


#header{
background:#012940;
border-top:1px solid #cccccc;
text-align:center;
color:#ffffff;
}

#navigation ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
font-family:Verdana, Geneva, sans-serif;
font-size:15px;
background-color:#999;
}

#navigation a {
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:#999;
padding:0.2em 0.6em;
border-right:1px solid white;

}
#navigation a:hover {
background:#012940; color: #FFF;
}
#navigation li {display:inline;}

#content {
	float: left;
	width: 70%;
	//padding: 10px;
	background-color:#FFF;
	
	
}

#advert {
float:left;
width: 30%;
background:#CCC;
}

#footer{background:#012940;
border-top:1px solid #cccccc;
padding:10px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-radius:0px 0px 20px 20px; // for Opera
text-align:center;
color:#ffffff;
clear: both;
}




So, at the moment my content and advert divs sit side by side with the footer underneath. However, when the content div has more content inside than the advert div and vice versa, the columns are never the same height.

How would I change my CSS so that the small column is always equal to the same height as the taller column.

Also would just like peoples opinions on this matter. Is it better to set widths and heights to percentages or to pixels?

Much love x

Is This A Good Question/Topic? 0
  • +

Replies To: How do I change my CSS to get my columns to be the size height?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3486
  • View blog
  • Posts: 10,055
  • Joined: 08-June 10

Re: How do I change my CSS to get my columns to be the size height?

Posted 05 April 2013 - 03:19 AM

View PostGeeky_Olivia, on 05 April 2013 - 10:07 AM, said:

How would I change my CSS so that the small column is always equal to the same height as the taller column.

a simple google search revealed http://matthewjamest...er-css-no-hacks (nicely explained).


View PostGeeky_Olivia, on 05 April 2013 - 10:07 AM, said:

Also would just like peoples opinions on this matter. Is it better to set widths and heights to percentages or to pixels?

either percentages or EMs, but definitely not pixels.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3227
  • View blog
  • Posts: 10,838
  • Joined: 12-December 12

Re: How do I change my CSS to get my columns to be the size height?

Posted 05 April 2013 - 03:20 AM

Equal height columns are not as straight-forward as one might anticipate. Various techniques are introduced here:

http://www.vanseodes...height-columns/

There are also arguments for and against pixels or percentages:

http://kyleschaeffer...vs-px-vs-pt-vs/

A good starting point is not to set specific heights or widths (particularly heights).

BTW /* this is a CSS comment */ (not // this ).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1