WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Two Divs next to each other are not the same height...

Reply
  Thread Tools Display Modes
Old 3rd February 10, 06:43 AM   #1
johnny0313x
WLC Member
 
Join Date: Feb 2010
Posts: 10
Default Two Divs next to each other are not the same height...

I have a question and I am sure my code is a mess because I am new to CSS but so far I have only noticed a problem in Safari for windows which I will work all that out at the end but I am confused about my main content area and the side bar on the right. I want them to always be the same height no matter what. Most likely the content/news section will dominate the length of the page. So the sidebar should just show white space and continue down next to the news articles. RIght now it's not doing that, I tried height auto and 100% and they did not work. I know auto goes off of the content inside the div and the content will be shorter them the news portion will be so that will not work and 100% did nothing. I am new to CSS so please go easy on me about explaining things. Baby talk would be best lol.
http://www.keshanow.net/index12.php
The primary divs you would be looking at are Content which is "housing" the two divs(sidebar and content1[news])
footer is using clear both to stay at the bottom which is that blue box at the bottom
The heading stuff at the top I think is okay though I am sure it could be cleaned up my focus is getting the sidebar and news section on the page height.
I would love some feedback cleaning all this up but I will settle for just getting these two boxes even and I will try and clean the mess up at the end as well as try and get it working in all browsers.


CSS
Code:
body {
 
background-color: #000;
background:#1E1B16 url(images/neonbg.gif);
 
text-align:center;
 
margin:0; 
 
 
}
 
 
 
 
#header{
width:800px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height:445px;
background:#1E1B16 url(images/bg_top.gif) repeat-x top;
margin-left: auto;
margin-right: auto;
}
 
#kesha{
position: relative; 
float: left;
 
    width:324px;
 
    height:445px;
 
    margin: 0px;
 
    top: 0px;
 
    left: 0px;
 
    background-color: #FF0000;
background:url(images/kesha_top.png) no-repeat;
 
}
 
#innerwrap{
	width:447px;
	height:445px;
	margin:0px;
	top: 0px;
	position: relative; 
	float: right;
 
 
}
 
#menu{
	width:447px;
	height:287px;
	margin:0px;
	top: 8px;
	position: relative; 
	float: right;
	background:url(images/headlines.png) no-repeat;
 
 
}
 
#menu p {
  margin-top: 75px;
  margin-left:75px;
  font-size: 12px;
  line-height: 1.5em;
  text-align: left;
  font-family: sans-serif;
  font-style: normal;
  font-variant: normal;
	font-weight: normal;
	font-size: small;
	line-height: 150%;
	word-spacing: normal;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	text-indent: 0ex;
	color: #222;
 
 
}
 
.class1	a:link {color: #E0FFFF; text-decoration: underline; }
.class1 a:active {color: #0000ff; text-decoration: underline; }
.class1 a:visited {color: #E0FFFF; text-decoration: underline; }
.class1 a:hover {color: #000; text-decoration: none; }
 
 
 
 
 
 
 
 
#album{
	margin:0px;
	width:447px;
	height:88px;
	bottom: -10px;
	right: -75px;
	position: relative; 
	float: left;
	background:url(images/album.png) no-repeat;
 
}
 
#headlines{
	margin:0px;
	width:447px;
	height:88px;
	bottom: 10px;
	right: -75px;
	position: relative; 
	float: left;
 
 
}
 
 
#logo{
	margin:0px;
	width:447px;
	height:88px;
	bottom: -15px;
	right: -95px;
	position: relative; 
	float: left;
	background:url(images/logo.png) no-repeat;
 
}
 
#links{
	margin:0px;
	width:800px;
	height:37px;
	bottom: 0px;
	right: 0px;
	position: relative; 
	float: right;
 
 
 
 
}
 
 
 
 
ul li {
	display: block;
	float: left;
	list-style: none;
}
 
ul li a {
	display: block;
	height: 37px; width: 86px;
	background: transparent url(images/links.png) no-repeat 0 0;
	text-indent:-9009px;
}
 
ul li#navigation2 a {
	width:110px;
	background-position: -86px 0;
}
 
ul li#navigation3 a {
	width:123px;
	background-position: -196px 0;
}
 
ul li#navigation4 a {
	width:97px;
	background-position: -319px 0;
}
 
ul li#navigation5 a {
	width:108px;
	background-position: -416px 0;
}
 
ul li#navigation6 a {
	width:100px;
	background-position: -524px 0;
}
 
ul li#navigation7 a {
	width:176px;
	background-position: -624px 0;
}
 
 
ul li a:hover {
	background-position: 0px -37px;
}
 
ul li#navigation2 a:hover {
	background-position: -86px -37px;
}
 
ul li#navigation3 a:hover {
	background-position: -196px -37px;
}
 
ul li#navigation4 a:hover {
	background-position: -319px -37px;
}
 
ul li#navigation5 a:hover {
	background-position: -416px -37px;
}
 
ul li#navigation6 a:hover {
	background-position: -524px -37px;
}
 
ul li#navigation7 a:hover {
	background-position: -624px -37px;
}
 
 
#content{
width:800px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height: auto;
background:#FFF;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
}
 
#content1{
width:500px;
background:#FFF;
font-family: Verdana;
font-size: 13px;
font-weight: normal;
text-decoration: none;
line-height: 17px;
color: #3e0f54;
float:left;
 
}
 
#content1 h1 {
	font-family: Verdana;
	font-size: 23px;
	line-height: 5px;
	padding-top: 27px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	color: #f40ce1;
}
 
#content1 h2 {
	font-family: Verdana;
	font-size: 12px;
	font-weight: normal;
	line-height: 5px;
	color: #0ccbf4;
}
 
 
#content1 a {
	font-family: Verdana;
	font-weight: normal;
	color: #0eebd8;
}
 
#content1 a:visited {
	font-weight: normal;
	color: #87d8bd;
}
 
#content1 a:hover {
	text-decoration: none;
	color: #3acbeb;
}
 
 
#sidebar{
width: 300px;
height: auto;
background:#fff;
font-family: Verdana;
font-size: 13px;
font-weight: normal;
text-decoration: none;
line-height: 17px;
color: #3e0f54;
float: right;
 
}
 
 
 
#content-lyrics{
width:780px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height: auto;
background:#FFF;
margin-left: auto;
margin-right: auto;
padding: 10px 10px 10px 10px;
}
 
#footer{
clear:both;
width:780px;
border-top: 0px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height: auto;
background:#66ccdd;
margin-left: auto;
margin-right: auto;
padding: 10px 10px 10px 10px;
}



HTML:
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=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />		
    <title>title</title>
    <meta name="description" content="Kesha Fansite with Media, News, Social network, lyrics, and more!" />
    <meta name="keywords" content="Kesha, Tik Tok, Pop star, Social, Lyrics, Media, News, Blah Blah Blah, Sebert, Kmoney" />
    <meta name="author" content="Jly" />
    <link rel="stylesheet" type="text/css" href="master.css" />
    <meta name="google-site-verification" content="ct9oLaPt5WpwOhRqDd6KUKEh4CxltU52srO0S9Q-I6o" />
  </head>
<body>
<div id="header">
<div id="kesha"></div>
<div id="innerwrap">
<div id="menu"><p><?php
include("phpnews/headlines.php");
?></p></div>
<div id="album"></div>
<div id="logo"></div>
 
</div>
<div>
<ul id="links">
<li><a href="index.php">Main</a></li>
<li id="navigation2"><a href="media.php">Media</a></li>
<li id="navigation3"><a href="contact.php">Contact</a></li>
<li id="navigation4"><a href="links.php">Links</a></li>
<li id="navigation5"><a href="http://www.keshanow.net/gallery/" target="new">Photos</a></li>
<li id="navigation6"><a href="lyrics.php">Lyrics</a></li>
<li id="navigation7"><a href="http://www.keshanow.net/knetwork/" target="new">Fan Network</a></li>
</ul>
</div>
</div>
 
 
<div id="content">
<div id="content1">
 
<?php
include("phpnews/news.php");
?>
</div>
<div id="sidebar">fsd</div>
</div>
<div id="footer"><small><span
class="Apple-style-span"
style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Times; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span
class="Apple-style-span" style="text-align: center;"><small>The views
expressed on this site are in no way affiliated with Ke$ha or her
team/label. No copyright violations are intended. If there is
copyrighted information on this site, please e-mail me to remove it. <br>
<a href="index.html">Main</a> | <a href="media.html">Media</a> | <a
href="contact.html">Contact</a> | <a href="links.html">Links</a> | <a
href="http://www.keshanow.net/gallery/">Photos</a> | <a
href="lyrics.html">Lyrics</a> | <a
href="http://www.keshanow.net/knetwork/">Fan Network</a></small><br>
</span></span></small></div>
</body>
</html>
johnny0313x is offline   Reply With Quote
Old 7th February 10, 05:43 AM   #2
johnny0313x
WLC Member
 
Join Date: Feb 2010
Posts: 10
Default Re: Two Divs next to each other are not the same height...

Faux columns, problem solved
johnny0313x is offline   Reply With Quote
Old 7th February 10, 08:25 AM   #3
Josephbm91
WLC Member
 
Join Date: Jan 2010
Location: Texas
Posts: 17
Default Re: Two Divs next to each other are not the same height...

I agree, Faux Columns would be a good approach! Here are some resources for Faux Columns:

http://www.alistapart.com/articles/fauxcolumns/

http://www.code-sucks.com/css%20layo...x-css-layouts/

http://www.addedbytes.com/articles/f...iquid-layouts/
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.



To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Josephbm91 is offline   Reply With Quote
Old 7th February 10, 08:33 AM   #4
johnny0313x
WLC Member
 
Join Date: Feb 2010
Posts: 10
Default Re: Two Divs next to each other are not the same height...

I actually got the site running pretty good. I'm having some cross browser issues. Feel free to look at my other post in the site check forum. Any help would be GREATLY appreciated.
johnny0313x is offline   Reply With Quote
Old 7th February 10, 08:36 AM   #5
Josephbm91
WLC Member
 
Join Date: Jan 2010
Location: Texas
Posts: 17
Default Re: Two Divs next to each other are not the same height...

Quote:
Originally Posted by johnny0313x View Post
I actually got the site running pretty good. I'm having some cross browser issues. Feel free to look at my other post in the site check forum. Any help would be GREATLY appreciated.
"Pretty good" and "cross browser issues" Don't really go together :\
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.



To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Josephbm91 is offline   Reply With Quote
Old 7th February 10, 08:45 AM   #6
johnny0313x
WLC Member
 
Join Date: Feb 2010
Posts: 10
Default Re: Two Divs next to each other are not the same height...

That's the problem lol. It's running great in chrome and firefox. And pretty good in IE lol
johnny0313x is offline   Reply With Quote
Old 9th February 10, 03:43 PM   #7
si70
WLC Member
 
Join Date: Feb 2010
Posts: 1
Default Re: Two Divs next to each other are not the same height...

I have had a similar issue with my site. It has a header, footer, left,right and main central column. As the main column has varying content on different pages but the styling applies to all pages, I am trying to find a way to make the left and right columns match the varying height of the central column. If I was to use faux columns would I need to alter the height of the image in order to get it to follow suit or have I missed something
si70 is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:23 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.