Aligning elements using CSS

Gullydwarf

12-21-2010, 10:35 PM

Hey all,
This is my first post here so I hope you'll forgive me if I break some rules.
I've been looking for tips on using CSS to align elements for my new website. I am pretty new at this structure but familiar with syntax.

I am trying to get a nice header together for my website. It contains two elements; a logo and a title, which should join nicely.
My logo is 100px high so that's what I want my header to be. I set all the margins and padding to zero and made a bottom border. Inside the header div I made two divs. One containing the logo and the other containing my title text.
I want them centered. The header div should be centered so the complete combination hangs neatly in the center. But now I got the logo div floating left and the text div floating right, so they're as far apart as my screen allows them to be.... How do I get them neatly next to eachother in the center?
I have a working solution with tables, but ran into another problem of the content div overflowing into my header div somehow. Making my menu renderend above the bottom border of the header div. (the border was a <hr> back then, now it's a border-bottom) And someone also told me tables was bad practice.

I hope someone can help me without me having to give out my code because I am working on some sensitive stuff.

NoeG

12-21-2010, 11:32 PM

float property should work dont forget the clear fix
I just wrote a tutorial about this
http://templafied.com/2010/12/12/css-howtousefloatincss/

Excavator

12-22-2010, 12:38 AM

Hello Gullydwarf,
Without code to look at, all we can do is guess. You could provide code you are working with but no content.
It sounds like your header has no width. If it is to contain your left and right header elements and be centered, it will need a width.

Excavator

12-22-2010, 12:39 AM

Have a try with this - <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
font: 100% Tahoma, Geneva, sans-serif;
color: #333;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
h1 {
margin: 0;
line-height: 100px;
border-bottom: 2px solid #f00;
}
#logo {
height: 100px;
width: 300px;
margin: 0 25px 0 0;
float: left;
display: block; /*for demo only*/
background: #0f0; /*for demo only*/
}

</style>
</head>
<body>
<div id="container">
<h1 id="header">
<img src="path/to/image.jpg" alt="logo" id="logo" />
Title of This Site
</h1>
</div>
</body>
</html>

Gullydwarf

01-07-2011, 11:26 PM

Hello thank you for the tips and sorry for my late reply.
Here is some code from me:
the HTML

<div class="header">
<div id="logo">
<img src="./img/logo.gif" alt="" class="header">
</div>
<div id="titel">
My Title
</div>

</div>


my CSS:
/* Get rid of standard margin/padding */
* { margin: 0;
padding: 0; }

body { /*width: 1024px;*/
height: 100%;
/* Center de body van de pagina */
margin-left: auto;
margin-right: auto; }

hr { color: #000099;
background-color: #000099;
height: 3px;
margin: 0; }

.header { color: #000099;
text-align: center;
height: 100px;
font-size: 60px;
font-family: Arial;
/* Center de header elementen */
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
border-bottom: 3px solid #009;
position: relative; }

#logo { float: left; }
#titel { float: right; }
This CSS is a version from after I was trying lots of different things for a while so it is actually quite crappy...

but the code from excavator seems to work fine. So I think I am going use that. Thanks for that!