DIV help

InJust · 11-23-2011, 07: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

Code:

<!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

Code:

@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, 09: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.

InJust · 11-23-2011, 09:36 PM

Here is a pic before I set the "contenttextdiv" to float:left

and here it is after I set the div to float:left

I'm going to read up on that link so if that fixes it just ingore me

InJust · 11-23-2011, 10:29 PM

well, after an hour of fiddling I got it, thanks for the help Excavator.