PDA

View Full Version : Getting two divs next to each other



Technocrat
Jan 13th, 2007, 01:27 AM
I am stating up front that I am pretty bad with graphics but I am trying my best with this. My problem is I have 2 div tags that I want to be next to each other, the problem is I cannot figure out how to do it. I want the "main" div next to the "menu" div. If you try my code it will appear very obvious what I am trying to do.

I just don't know how to do it. Thanks for the help.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="theme/styles/styles.css" media="screen" />
<title>Install</title>
<script type="text/javascript" src="../javascript/factories/xlib/x_core.js"></script>
<script type="text/javascript" src="../javascript/factories/prototype/prototype.js"></script>
<script type="text/javascript" src="javascript/ajax.js"></script>
</head>
<body>

<div id="panel">
<div id="title">
<div id="title_start">
Install - Start</div>
</div>
<div id="menu">
<div id="cmenu_Start">
Start</div>
<div id="amenu_License">
License</div>
<div id="menu_Prerequisites">
Prerequisites</div>
<div id="menu_CHMOD">

CHMOD</div>
<div id="menu_Configure">
Configure</div>
<div id="menu_SQL">
SQL</div>
<div id="menu_Setup">
Setup</div>
<div id="menu_Finish">
Finish</div>
<div id="text_lang_select">Select Language:</div>
<div id="lang_select">

<span><select id="language" name="language" onchange="lang_change()">
<option value="english" selected="selected">english</option>
<option value="french" >french</option>
</select>
</span>
</div></div>
<div id="main">
<strong>Welcome to the installation</strong></div>
</div>
<div id="footer">
v3.0.0 Basic<br />

<a href="http://validator.w3.org/check?uri=referer"><img src="theme/images/valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" style="border:0;width:88px;height:31px"/></a>
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="theme/images/vcss.png" alt="Valid CSS!" /></a>
</div>
</body>
</html>

CSS:

/* Rest everything */
* {
/* Reset browsers default margin, padding and font sizes */
margin: 0;
padding: 0;
}


/* Body styles */
html {
font-size: 100%;
height: 100%;
margin-bottom: 1px;
/*background-color: #f1be39;*/
background-color: #fff;
}

#panel {
background-color: #FFFFFF;
border: solid 1px #000;
margin: 2em auto 0 auto;
width: 75%;
min-height: 500px;
}

#footer {
background-color: transparent;
margin: 0 auto 0 auto;
width: 75%;
text-align: center;
}

#title {
background: #0c93fb url("../images/title_bg.gif") 0 0;
margin: 0 auto 0 auto;
width: 100%;
min-height: 45px;
}


div[id^="title_"] {
font: bold 1.8em "Lucida Grande", 'Trebuchet MS', Verdana, sans-serif;
text-decoration: none;
text-align: center;
color: #fff;
}

#menu {
background-color: #FFFFFF;
margin: 0 0 0 0;
width: 10%;
min-height: 457px;

}

div[id^="menu_"] {
display: block;
padding: 1px 1px 1px 10px;
text-decoration: none;
font-weight: normal;
color: #006699;
font-weight: bold;
background-color: #ECECEC;
border-top: 1px solid #FFFFFF;
}

div[id^="amenu_"] {
display: block;
padding: 1px 1px 1px 10px;
text-decoration: none;
font-weight: normal;
color: #000;
font-weight: bold;
background-color: #f00;
border-top: 1px solid #FFFFFF;
}

div[id^="cmenu_"] {
display: block;
padding: 1px 1px 1px 10px;
text-decoration: none;
font-weight: normal;
color: #fff;
font-weight: bold;
background-color: #3a8d16;
border-top: 1px solid #FFFFFF;
}

#text_lang_select {
padding-top: 220px;

font: bold 0.8em "Lucida Grande", 'Trebuchet MS', Verdana, sans-serif;
text-decoration: none;
text-align: center;
width: 100%;
}

#lang_select {
text-align: center;
width: 100%;
}

#main {
float:left;
width: 90%;
margin-left: 10%;
min-height: 457px;
font: 1.0em "Lucida Grande", 'Trebuchet MS', Verdana, sans-serif;
border-left: solid 1px #000;

}

mindlessLemming
Jan 13th, 2007, 04:22 AM
You need to use the 'float' CSS property. Here's a good tutorial that'll teach you - http://css.maxdesign.com.au/floatutorial/ :)