View Full Version : Using CSS & DIV instead of tables for Layout

04-27-2006, 01:28 PM
Hi All,

I have been building website for a few years now and have always used tables as a way to structure a page. I have just got more involved in using CSS to it's full potential and usig DIVS to manage the layout.

What I am completely stuck around is getting one DIV lines up with another. Probably the best way to explain what I mean is using the CodingForums.com header above.

I have created a div style for the company logo and another div style for a search box. The layout I want to achieve is having the logo on the left (as above) and search box on the right, without using tables.

I've tried absolute, reletive, left aligns, all sorts (some code below).

Has anyone any ideas or good tutorials I can follow. For those of you who haven't got a clue what I am going on about, I apologise, as I have a tendency to go round the houses trying to explain something.

CSS Code
#outline {
position: relative; /* This is like centering a table */
width: 800px; /* Width starts from the centre out - if set to auto it it positioned left */
margin-right: auto; /* More relevant for inner divs but gives you margin for edge of page or relative position */
margin-left: auto; /* As above */

#footeroutline {
position : relative;
width : 800px;
margin-top: 15px;
margin-right: auto; /* Needed for centering */
margin-left: auto;
text-align : center;

#headeroutline {
position: relative;
width: 800px;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;

#logo {
position: relative;
width: 200px;
left: 100px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;

.headerSearch {
float: right;
margin-top: 50px;

<div id="logo">
<img src="../images/logos/murge_logo.jpg">
<div class="headerSearch">
Search Box Goes Here

The result is one under the other, not next to each other.



04-27-2006, 01:33 PM
I recommend floats instead of absolute positioning.

Maybe you have to use z-index

04-27-2006, 03:35 PM
What you can do is just have a header div that is position:relative. Insert your image into this div. Then include your search box .headerSearch{position:absolute; right:0; top:50px;}

04-27-2006, 07:00 PM
here are literally thousands of css examples including layouts.


read this wonderful book