DIV side by side

9three · 12-23-2008, 09:38 PM

I'm finding myself use negative numbers for my 2nd DIV if I need it to be set next to another DIV. I'm currently using relative positions.

Is there a way to put DIVs next to each other without making a cluster code?

CoryMathews · 12-23-2008, 10:21 PM

.divclass { width:200px; float:left; display:block; }

then after all the divs you will need one more div with

<div style="clear:both"></div>

that should work.

9three · 12-24-2008, 12:32 AM

works like a charm :)

9three · 12-27-2008, 02:41 AM

hm this wont work if i need more DIVs under each other. they tend to sorta spaz out

CoryMathews · 12-27-2008, 06:59 AM

Set a height then. That will fix it you also might want to add overflow:hidden;

so the css will be

.divclass { width:200px; float:left; display:block; height:20px; overflow:hidden; }

9three · 12-27-2008, 06:21 PM

hm that didnt do anything. What I'm looking for is something like this:

Header1--------------------Header2
Content1-------------------Content2

The problem though, with your code, whats happening in the following:

Header1 Content1-----------Header2
-----------------------Content2

I already added the overflow and height but nothing :/

EDIT: I just added the overflow to content1 and content2 with a set height and it fixed content2 to be right under header2 but content1 is still not positioned where it suppose to be. It should be under header1 but its right on the top margin, and right next to header1. So this is what it looks like now:

Header1 Content1------------Header2
-----------------------------------Content2

CoryMathews · 12-27-2008, 08:06 PM

Can you post your actual code for me.

9three · 12-27-2008, 08:26 PM

Sure

Code:

body {
  font-family: Verdana, Helvetica, Arial, Tahoma, sans-serif;
  font-size: 10px;
  color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  background: #1c2932 url(../images/bg_nav.jpg) repeat-x left top;
}

/* Layout design */

#wrapper {
  position: relative;
  margin: 0 auto;
  padding: 0px;
  width: 780px;
  height: 0px;

}

hr {
  border: 0;
  color: #9E9E9E;
  background-color: #9E9E9E;
  height: 1px;
  width: 100%;
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
li {
  list-style-type: none;
  list-style-position: outside;
  padding: 0px;
  margin: 0px;
  height: 14px;
  width: 100%;

}

/* Font styles */

.navtxt {
  padding-top: 10px;
  font-weight: bold;
}

.attention {
  font-weight: bold;
}

/* Link Styles */

a:link, a:active {
  color: #FFFFFF;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.nav {
  display: block;
  background: #142129;
  padding: 0px;
  margin-top: 1px;
  padding-top: 2px;
}
/* Main DIVs */

.navleft { 
 width: 100px; 
 float: left; 
 display: block;
 height: 50px;
 overflow: hidden;
}

.navright {
 width: 150px; 
 float: right; 
 display: block;
 height: 50px;
 overflow: hidden;
}

.contentleft {
 top: 0px;
 margin: 0px;
 width: 500px; 
 float: left; 
 display: block;
 background: #FFFFFF;
 color: #000000;
 overflow: hidden;
 height: 100px;
}

.contentright {
 top: 0px;
 left: 0px;
 margin: 0px;
 width: 141px; 
 float: right; 
 display: block;
 color: #FFFFFF;
 overflow: hidden;
 height: 400px;
}

The code you gave me is under /* Main DIVs */ and the classes are navleft, navright, contentleft and contentright

hm I'm wondering, maybe, its not working because I dont have wrappers for the actual content. Maybe it will work if I wrap navleft and navright together and contentleft and contentright together? that way it doesn't conflict with any other DIVs but the ones inside the wrapper?

9three · 12-27-2008, 08:37 PM

HTML Code:

Code:

<!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></title>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
    <div class="topnav">
    <div class="navleft" align="left">
    <div class="navtxt">Title.com</div>
    </div>
    <div class="navright">
    <div class="navtxt" align="right">
    <a href="#" class="navlink">Home</a> | <a href="#">Forums</a> | <a href="#">Contact</a></div>
    </div>
    </div>
  <div class="contentleft">
Hello
  </div>
  <div class="contentright">
  <div class="attention">Section1</div>
  <hr />
  <ul>
  <li><a href="#" class="nav">HTML & CSS</a></li>
  <li><a href="#" class="nav">PHP & MYSQL</a></li>
  </ul>
  <p></p>
  <ul>
  <li class="attention">Section2</li>
  <li><hr /></li>
  <li>HTML & CSS</li>
  <li>PHP & MYSQL</li>
  </ul>
  </div>
  <div style="clear:both"></div>
</div>
</body>
</html>

CoryMathews · 12-28-2008, 05:41 PM

The problem is not a really a css or an html problem but a problem with the sizes you picked.

.navleft { width:100px; float:left; display:block; height:50px; overflow:hidden; }
.navright { width:150px; float:right; display:block; height:50px; overflow:hidden; }
.contentleft { top:0; margin:0; width:500px; float:left; display:block; background:#FFF; color: #000; overflow: hidden; height:100px; }
.contentright { top:0; left:0; margin:0; width:141px; float:right; display:block; color:#FFF; overflow:hidden; height:400px; }

change that to

.navleft { width:500px; float:left; display:block; height:50px; overflow:hidden; }
.navright { width:150px; float:right; display:block; height:50px; overflow:hidden; }
.contentleft { top:0; margin:0; width:500px; float:left; display:block; background:#FFF; color: #000; overflow: hidden; height:500px; }
.contentright { top:0; left:0; margin:0; width:150px; float:right; display:block; color:#FFF; overflow:hidden; height:400px; }

that should clean it up. You basically just had your wrapper to large and your contents to small.

9three · 12-28-2008, 06:28 PM

yyesss it worked. thanks, i didnt catch that earlier

9three · 02-03-2009, 06:12 PM

Cory,

I have a new CSS problem. Remember how we set the tables to be all the same height? Well now the tables are going to change a little. They need to stack under each other with a padding of about 10-20 pixels. The problem is, when I use your code, the heights on all of them are the same, thus creating a huge gap in between the tables.

It's going to be 3 tables in one row, and 3 tables in the second row. With different heights on each table. In essence they wont be straightly aligned, some will be higher than others.

Or would I just have to force the tables to move the way I want them to?

I hope you understand me.

Dr John · 02-06-2009, 05:26 PM

This would be much easier if you posted a link, so we could see what is going on.

If you set the height of a class of div and then put each table in its own div that might help you, but without a site to play with and edit, it's tricky to see what your problem is.

PS you have some totally unnecessary code there, where you tell a div to use display:block; because a div is a block level element by definition.