...

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



murgeltd
04-27-2006, 12: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;
color:#999999;
}

#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;
}

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

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

Cheers,

Andy

Masterslave
04-27-2006, 12:33 PM
I recommend floats instead of absolute positioning.
http://www.w3schools.com/css/pr_class_float.asp

Maybe you have to use z-index
http://www.w3schools.com/css/pr_pos_z-index.asp

drhowarddrfine
04-27-2006, 02: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;}

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

http://css-discuss.incutio.com/

read this wonderful book

http://www.idest.com/csshacks/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum