[RESOLVED] Making divs follow directly after one another w/out "display:inline" - HTML Forums

Nukoca · 11-12-2009, 05:24 PM

NOTE: I meant to make the title say, "Making divs follow directly after one another w/out 'display:inline'"

I need these four divs (home, cubes, sketches, and me) to be the top of the page and centered. However, they've decided that they'd rather sit at the beginning of the "transparent" div.

I'm using an HTML code snippet to display my blog posts. I'll be installing Wordpress later. Thanks in advance to those who are willing to decrypt my coding.

The top corners should display correctly once the navbar's in the right spot.

Here's what it looks like:
http://i38.tinypic.com/2iuqe6o.png

Here's my HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="layout.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">


<title>The Lazy Astronomer</title>

</head>

<body>

<div id="planet">

<div id="home">home</div>
<div id="puzzles">puzzles</div>
<div id="sketches">sketches</div>
<div id="me">me</div>

<div id="transparent">

<div id="tc">
</div><!--end tc div-->

<div id="content">

<script src="http://feeds.feedburner.com/TheLazyAstronomer?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/TheLazyAstronomer"></a><br />Powered by FeedBurner</p> </noscript>

</div><!--end content div-->

</div><!--end transparent div-->

<div id="bc">
</div><!--end bc div-->

</div><!--end planet div-->

</body>
</html>

And my CSS:

Code:

body {
    background:#000 url('bgimage.png') top center;
    font-family:"Verdana";
    font-size:.9em;}

#planet {
    margin-left:auto;
    margin-right:auto;
    background: url('earth.png') no-repeat top center;}
    
#home, #puzzles, #sketches, #me {
    background-image: url('container_bg.png');
    font-size:2.3em;
    height: 70px;
    text-align: center;
    width:225.5px;}
    
#home {float:left;}
#puzzles {float:left} 
#sketches {float: right;}
#me {float:right;}
 
 
#tc {
    background-image: url('tc.png');
    position:relative;
    top:-21px;
    left:26px;
    float:right;
    height:20px;
    width:950px;}

#bc {
    position: relative;
    top:-19px;
    background-image: url('bc.png');
    margin-left:auto;
    margin-right:auto;
    height:20px;
    width:950px;}

#transparent {
    margin-left:auto;
    margin-right:auto;
    padding:20px 25px;
    width: 898px;
    margin-top:100px;
    background-image:url('container_bg.png');}
    
#content {
    padding:15px 20px;
    background-color:#fff;
    list-style-type:none;}
    
.headline {
    font-size:1.5em;
    position:relative;
    left:15px;}
    
.headline a:link {color:#000000}
.headline a:link {color:#000000}
.headline a:visited {color:#000000}
.headline a:hover {color:#000000}
.headline a:active {color:#000000}

ul {position:relative; left:-30px;}
li {list-style-type:none;}

coothead · 11-13-2009, 04:18 AM

Hi there Nukoca,

try adding clear:both; to your #transparent rules.

Nukoca · 11-13-2009, 10:55 AM

Quote:

Originally Posted by coothead

Hi there Nukoca,

try adding clear:both; to your #transparent rules.

Done. But there's another problem now... the '#transparent' div is ignoring my "margin-top:100px;" property. Also, how do I center the
'#home', '#puzzle', '#sketches' and '#me' divs over the top of the '#tranparent' div? Thanks again.

Here's the new screenshot: http://i38.tinypic.com/10p1404.png

Here's the new CSS:

Code:

body {
    background:#000 url('bgimage.png') top center;
    font-family:"Verdana";
    font-size:.9em;}

#planet {
    margin-left:auto;
    margin-right:auto;
    background: url('earth.png') no-repeat top center;}
    
#home, #puzzles, #sketches, #me {
    background-image: url('container_bg.png');
    font-size:2.3em;
    height: 70px;
    text-align: center;
    width:225.5px;}
    
#home {float:left;}
#puzzles {float:left} 
#sketches {float: right;}
#me {float:right;}
 
 
#tc {
    background-image: url('tc.png');
    position:relative;
    top:-21px;
    left:26px;
    float:right;
    height:20px;
    width:950px;}

#bc {
    position: relative;
    top:-19px;
    background-image: url('bc.png');
    margin-left:auto;
    margin-right:auto;
    height:20px;
    width:950px;}

#transparent {
    clear:both;
    margin-left:auto;
    margin-right:auto;
    padding:20px 25px;
    width: 898px;
    margin-top:100px;
    background-image:url('container_bg.png');}
    
#content {
    padding:15px 20px;
    background-color:#fff;
    list-style-type:none;}
    
.headline {
    font-size:1.5em;
    position:relative;
    left:15px;}
    
.headline a:link {color:#000000}
.headline a:link {color:#000000}
.headline a:visited {color:#000000}
.headline a:hover {color:#000000}
.headline a:active {color:#000000}

ul {position:relative; left:-30px;}
li {list-style-type:none;}

coothead · 11-13-2009, 11:49 AM

Hi there Nukoca,

remove margin-top:100px; from your #transparent rules,and add margin-bottom:100px;
or whatever value, to your #home, #puzzles, #sketches, #me rules.

Also note that you cannot set a pixel value to 225.5px.

Nukoca · 11-13-2009, 12:36 PM

Quote:

Originally Posted by coothead

Hi there Nukoca,

remove margin-top:100px; from your #transparent rules,and add margin-bottom:100px;
or whatever value, to your #home, #puzzles, #sketches, #me rules.

Aha, that's better. http://i33.tinypic.com/530hox.jpg

But how do I make the divs on top be centered directly above '#transparent'?

Quote:

Originally Posted by coothead

Also note that you cannot set a pixel value to 225.5px.