...

View Full Version : DIV help



InJust
11-23-2011, 08:47 PM
Im trying to create a website (obviously) but when I try to position one div next to another the background in one stops working :( I dont know why this isnt working or how to fix it. By the way I'm very new to html and css so my code is probably sloppy. Thank you in advance for any help you can give.

HTML


<!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>Productivity</title>
<link href="mainstyles.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
</head>

<body class="background webfonts" >

<div id="header" class="headerdiv" >
<span class="header"> My </span>
<span class="headeremph"> Productivity </span>
<span class="header"> Website </span>
</div>

<div id="conent_container" class="contentdiv">

<img src="assets/content_header.png" />

<div id="content_main-container_bg" class="maincontentbg" >

<div id="content_text" class="contenttextdiv">

<div id="title_container" class="contentpagetitle"> Page Title goes here </div>

<span class="contenttitletext">Content Title Goes Here</span><br />

<span class="contenttext"> Content...content goes here (need bottom margin of ~5px)</span>

</div>
</div>

<div id="vert-nav-header_container" class="vert-nav-header"><img src="assets/vert_nav_header.png" /></div>

</div>
</body>
</html>


CSS


@charset "utf-8";
/* CSS Document */
.webfonts {
font-family: 'Ubuntu Condensed', sans-serif;
}
.background {
background-image:url(Pictures/background_texture.jpg);
background-attachment:fixed;
background-position:center;
}
.headerdiv {
margin-top:30px;
margin-left:30%;
}
.header {
font-size:36px;
color:#CCCCCC;
}
.headeremph {
font-size:43px;
color:#999999;
}
.contentdiv {
margin-left:auto;
margin-right:auto;
margin-top:30px;
width:631px;
}
.maincontentbg {
background-image:url(assets/main_content_repeat.png);
background-repeat:repeat-y;
background-position:center;
}
.contenttitletext {
color:#CCCCCC;
font-size:24px;
}
.contenttext {
color:#CCCCCC;
font-size:16px;
margin-left:15px;
margin-bottom:15px;
}
.contenttextdiv {
margin-left:5px;
}
.contentpagetitle {
font-size:36px;
color:#999999;
margin-bottom:5px;
}
.vert-nav-header {
margin-left:50px;
}

Excavator
11-23-2011, 10:03 PM
Hello InJust,
Can you be a little more specific? Exactly what two elements are you trying to place beside each other?

Typically, you use floats to put things side by side. This usually means you have to clear your floats too, or the containing element doesn't behave the way you expect it to.

See this explanation of how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

InJust
11-23-2011, 10:36 PM
Here is a pic before I set the "contenttextdiv" to float:left
http://i41.tinypic.com/sz7u41.jpg

and here it is after I set the div to float:left
http://i42.tinypic.com/xe36zn.jpg
I'm going to read up on that link so if that fixes it just ingore me :p

InJust
11-23-2011, 11:29 PM
well, after an hour of fiddling I got it, thanks for the help Excavator. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum