CSS Question Please Help

JonnySnip3r

12-17-2009, 09:31 PM

Hey guys sorry if this is a simple question im new to CSS :) below is my css code:

.news {
margin-top: 10px;
width: 200px;
height: 300px;
border: 2px solid red;
padding-left: 15px;
font-family: sans-serif;
color: red;
}

.themes {
width: 200px;
height: 200px;
border: 2px solid red;
font-family: sans-serif;
color: red;
}

ok i have 2 borders but the .themes i want displayed on the right side of the screen only when i do this it displays on the right side but below the .news one :S

how can i have it where it displays directly adjacent from the .news.

Thanks and sorry if it simple but so i am :)

Excavator

12-17-2009, 11:02 PM

Hello JonnySnip3r,
You'll need to float one or both of those boxes then.
Try it like this for starters - <!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 {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
.themes {
width: 200px;
height: 200px;
float: right;
border: 2px solid red;
font-family: sans-serif;
color: red;
}
.news {
width: 200px;
height: 300px;
margin-top: 10px;
border: 2px solid red;
padding-left: 15px;
font-family: sans-serif;
color: red;
}
</style>
</head>
<body>
<div id="container">
<div class="themes">Themes</div>
<div class="news">News</div>
</div>
</body>
</html>

JonnySnip3r

12-17-2009, 11:20 PM

Thanks for the help dude!

Excavator

12-17-2009, 11:41 PM

No problem!
Have a look here for an explanation of floats (http://css.maxdesign.com.au/floatutorial/introduction.htm).