Can't place 2 divs next to each other

cruelity93 · February 22, 2011, 1:59pm

The problem

The main and content are under the sidebar.
And I can’t put main and content as first in order.

Because I’m including header, and the header needs to contain sidebar and navigation.

The otherfiles need to include content and main.

This is my HTML


		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link type="text/css" href="css/layout.css" rel="stylesheet" />	
		
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/easyTooltip.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.wysiwyg.js"></script>
		<script type="text/javascript" src="js/hoverIntent.js"></script>

		<script type="text/javascript" src="js/superfish.js"></script>
		<script type="text/javascript" src="js/custom.js"></script>
	<body>
		<!-- Container -->
		<div id="container">
		
			<!-- Header -->
			<div id="header">
				
				<!-- Top -->

				<div id="top">
					<!-- Logo -->
					<div class="logo"> 
						<a href="#" title="Administration Home" class="tooltip"><img src="assets/logo.png" alt="Wide Admin" /></a> 
					</div>
					<!-- End of Logo -->
					
					<!-- Meta information -->
					<div class="meta">
						<p>Welcome, Cruel.<br>You are logged in on 84.82.172.22</p>

						<ul>
							<li><a href="logout.php" onclick='return confirm("Are you sure you want to logout?");' title="Logout from booter" class="tooltip"><span class="ui-icon ui-icon-power"></span>Logout</a></li>
							<li><a href="mysettings.php" title="Change your settings" class="tooltip"><span class="ui-icon ui-icon-wrench"></span>Settings</a></li>
							<li><a href="account.php" title="View your account info" class="tooltip"><span class="ui-icon ui-icon-person"></span>My account</a></li>
						</ul>	
					</div>
					<!-- End of Meta information -->
				</div>

				<!-- End of Top-->
				
								
				<!-- The navigation bar -->
				<div id="navbar">
					<ul class="nav">
						<li><a href="index.php">Home</a></li>
						<li><a href="hub.php">Booter</a></li>
						<li><a href="updates.php">Updates</a></li>

						<li><a href="mysettings.php">Settings</a></li>
						<li><a href="shoutbox.php">Shoutbox</a></li>
																		<li>
							<a href="">Admin</a>
							<ul>
								<li><a href="admin.php">Admin Panel</a></li>
								<li><a href="logs.php">Attack Logs</a></li>

								<li><a href="">Shells</a>
									<ul>
										<li><a href="addshell.php">Add Shells</a></li>
										<li><a href="manageshells.php">Shells</a></li>
									</ul>
								</li>
							</ul>

						</li>
														</ul>
				</div>
				<!-- End of navigation bar" -->

			</div>
			<!-- End of Header -->


			<!-- Background wrapper -->

			<div id="bgwrap">

			<!-- Sidebar -->
				<div id="sidebar">
				
					<h2>Statistics</h2>
					<!-- Accordion -->
					<div id="accordion">
						<div>
							<h3><a href="#" title="Profile Statistics" class="tooltip">Profile Statistics</a></h3>

							<div>
							<table class="stats">
							<tr>
							<td>Profile ID</td>
							<td>118</td>
							</tr>
							<tr>
							<td>Rank</td>

							<td>Administrator</td>
							</tr>
							<tr>
							<td>IP</td>
							<td>84.82.172.22</td>
							</tr>
							</table>

							</div>
						</div>
						<div>
							<h3><a href="#" title="Member Statistics" class="tooltip">Member Statistics</a></h3>
							<div>
							<table class="stats">
							<tr>
							<td>Total Users</td>

							<td>37</td>
							</tr>
							<tr>
							<td>Active Users</td>
							<td>27</td>
							</tr>
							<tr>

							<td>Pending Users</td>
							<td>10</td>
							</tr>
							<tr>
							<td>Total Attacks</td>
							<td>1140</td>
							</tr>

							</table>
							</div>
						</div>
						<div>
							<h3><a href="#" title="Shells Statistics" class="tooltip">Shells Statistics</a></h3>
							<div>
							<table class="stats">
							<tr>

							<td>Shell Rotation</td>
														<td>On</td>
														</td>
							</tr>
							<tr>
							<td>Shell Online</td>
							<td>275</td>

							</tr>
							<tr>
							<td>GET Shells</td>
							<td>214</td>
							</tr>
							<tr>
							<td>POST Shells</td>

							<td>61</td>
							</tr>
							<tr>
							<td>Slowloris Shells</td>
							<td></td>
							</tr>
							</table>
							</div>

						</div>
					</div>
					<!-- End of Accordion-->
				
					<!-- Sortable Dialogs -->
					<h2>Latest News</h2>
					<div class="sort">
						<div class="box ui-widget ui-widget-content ui-corner-all portlet">
						<div class="portlet-header">Attack on Iraq</div>

							<div class="portlet-content">
								<p>This is a sortable dialog. Praesent augue urna, vehicula sed sollicitudin quis, dignissim nec est.</p>
							</div>
						</div>
						
						<div class="box ui-widget ui-widget-content ui-corner-all portlet">
							<div class="portlet-header">Osama has a baby</div>
							<div class="portlet-content">
								<p>This is a sortable dialog. Praesent augue urna, vehicula sed sollicitudin quis, dignissim nec est.</p>

							</div>
						</div>
						
						<div class="box ui-widget ui-widget-content ui-corner-all portlet">
							<div class="portlet-header">Bush died because of obama</div>
							<div class="portlet-content">
								<p>This is a sortable dialog. Praesent augue urna, vehicula sed sollicitudin quis, dignissim nec est.</p>
							</div>
						</div>

					</div>
					<!-- End of Sortable Dialogs -->
				
				</div>
				<!-- End of Sidebar -->
			</div>
			<!-- End of bgwrap -->
		</div>
		<!-- End of Container -->
<!-- Main Content -->

<div id="bgwrap">
<div id="content">
<div id="main"><br />
<b>Warning</b>:  mysql_numrows(): supplied argument is not a valid MySQL result resource in <b>/home/pastphas/public_html/booter/index.php</b> on line <b>6</b><br />
<div class="box">
<h2>No news to be displayed</h2>
<div class="box-content">
<p>There are currently no news posts! Create one in the administration panel to remove this message.</p>

</div>
</div>
   

<br>

</div>
</div>
<!-- Footer -->
		<div id="footer">
			<p class="mid">
				<a href="#" title="Top" class="tooltip">Top</a>&middot;<a href="#" title="Main Page" class="tooltip">Home</a>&middot;<a href="#" title="Change current settings" class="tooltip">Settings</a>&middot;<a href="#" title="End administrator session" class="tooltip">Logout</a>

			</p>
			<p class="mid">
				<!-- Change this to your own once purchased -->
				&copy; Wide Admin 2010. All rights reserved.
				<!-- -->
			</p>
		</div>
		<!-- End of Footer -->

CSS


/* Margin and padding reset */
* {
	margin:0;
	padding:0;
}

/* Global declarations */
body {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size:62.5%;
	position:relative;
}

img {
	border:0;
}

ul {
	list-style-type:none;
}

h1, h2, h3, h4, h5, h6 {
	clear:both;
	font-family:"Modata", Tahoma, Arial, sans-serif;
	font-weight:normal;
}

h1 {
	font-size:28px;
	margin-bottom:15px;
}

h2 {
	font-size:18px;
	margin-bottom:10px;
}

h3 {
	font-family: Tahoma, Arial, sans-serif;
}

p {
	font-size:13px;
	line-height:20px;
	margin-bottom:15px;
}

hr {
	clear:both;
	width:100%;
	height:1px;
	border:0;
	margin-bottom:20px;
	margin-top:10px;
}

fieldset {
	padding:20px;
	margin-bottom:15px;
}

fieldset legend {
	font-size:13px;
	padding:5px 10px 0;
}

fieldset p {
	margin-bottom:20px;
}

input, textarea, select {
	padding:5px;
	margin-right:10px;
}

select option {
	padding-right:15px;
}

textarea {
	display:block;
	width:500px;
	height: 160px;
}

label {
	display:inline-block;
	font-size:12px;
	width:120px;
}

a.button {
	position:relative;
	padding:3px 10px 3px 0px;
	text-decoration:none;
 	width:auto;
 	display:inline-block;
 	margin-right:10px;
}

a.button span {
	float:left;
	position:relative;
	margin:2px 3px 0 3px;
}

input.sf {
	width:120px;
}

input.mf {
	width:240px;
}

input.lf {
	width:360px;
}

.field_desc {
	font-style:italic;
	font-size:11px;
	color:#555;
}

.validate_error {
	font-size:11px;
	color:#f00;
	font-style:italic;
}

.validate_success {
	font-size:11px;
	color:#739f1d;
	font-style:italic;
}

.inpcol {
	display:inline-block;
	padding: 0 30px 0 15px;
	margin-bottom:15px;
}

.inpcol p {
	margin-bottom:5px;
}

INPUT[type="checkbox"], INPUT[type="radio"] {
	margin:1px 6px 0 10px;
	padding: 0;
}

#container {
	min-width:960px;
	max-width:1600px;
	margin:0 auto;
}

#header {
	width:100%;
	height:130px;
}

#header #top {
	display:block;
	width:100%;
	height:83px;
}

#top .logo {
	float:left;
	display:inline;
	width:361px;
}

#top .meta {
	display:inline;
	float:right;
	position:relative;
	padding-right:10px;
	margin-top:10px;
}

.meta p {
	text-align:right;
	margin-bottom:10px;
	margin-top:0px;
	color:#aaa;
        font-size:11px;
}

.meta ul {
	float:right;
}

.meta ul li {
	float:right;

}

.meta ul li .ui-icon {
	float:left;
}

.meta ul li a {
	float:left;
	margin:0 0 0 10px;
	font-size:10px;
	text-decoration:none;
}

.meta ul li a span {
	margin-top:-2px;
}

p.mid {
	text-align:center;
	margin-top:20px;
}

p.mid a {
	padding:0 10px;
}

#header #search {
	float:right;
	display:block;
	position:relative;
	width:249px;
	right:5px;
	height:26px;
	 margin-top:13px;
}

#search input {
	background:none;
	border:0;
	width:180px;
	padding:5px 10px 0 0;
	position:relative;
	font-size:12px;
	font-style:italic;
}

#search input.but {
	position:relative;
	float:left;
	width:24px!important;
	height:24px;
	margin-top:1px;
	padding:0!important;
}

#header #navbar {
	float:left;
	display:block;
}

#navbar ul.nav {
	display:inline-block;
	height:30px;
	margin-top:11px;
	position:relative;
	float:left;
}

ul.nav li {
	float:left;
	position:relative;
	height:30px;
	display:block;
}

ul.nav li a {
	color:#ccc;
	text-decoration:none;
	font-size:12px;
	padding:10px 20px 12px;
	display:block;
}

ul.nav ul {
	position:		absolute;
	top:			-999em;
	width:			10em; 
}

ul.nav ul li {
	border:0;
	padding:5px;
	width:130px;
	z-index:9999!important;
	height:auto;
}

ul.nav li:hover ul,
ul.nav li.sfHover ul {
	left:			0;
	top:			3.6em; /* match top ul list item height */
	z-index:		9999!important;
}

ul.nav li:hover li ul,
ul.nav li.sfHover li ul {
	top:			-999em;
}

ul.nav li li:hover ul,
ul.nav li li.sfHover ul {
	left:			14.0em; /* match ul width */
	top:			0;
}

ul.nav li li:hover li ul,
ul.nav li li.sfHover li ul {
	top:			-999em;
}

ul.nav li li li:hover ul,
ul.nav li li li.sfHover ul {
	left:			14.0em; /* match ul width */
	top:			0;
}


ul.nav li li {
	position:relative;
	z-index:9999!important;
}

ul.nav li li a {
	display:block;
	width:110px;
	font-size:12px;
	padding:5px 10px;
}


#bgwrap {
	float:left;
	position:relative;
	width:100%;
}


#sidebar {
	float:left;
	width:240px;
	position:relative;
	padding:0 15px;
}

#sidebar h2 {
	margin-top:30px;
}

#sidebar p {
	margin-bottom:0;
}

#sidebar .sort {
	display:inline-block;
	width:234px;
}

.sort .portlet {
	width:100%;
}


#sidebar ul {
	width:240px;
	margin-bottom:30px;
}

#sidebar ul li {
	width:190px;
	padding:5px 25px;
}



#sidebar ul ul {
	width:190px;
	margin-bottom:0;
	margin-top:3px;
}

#sidebar ul li ul li {
	width:165px;
}

#sidebar ul li ul li ul li {
	width:140px;
}

#sidebar li.last {
	border-bottom:0;
}

#content {
	float:right;
	width:100%;
	margin-left:-320px;
	position:relative;
 	background:url('../assets/siderep.png') 185px 0 repeat-y;
 	padding-bottom:30px;
}

#main {
	margin-left:320px;
	margin-right:30px;
	padding-top:30px;
	position:relative;
}

.pad20 {
	display:block;
	min-width:590px;
	max-width:1230px;
	padding:10px 20px;
}

#content ul.dash {
	float:left;
	display:block;
	margin-bottom:20px;
}

#footer {
	clear:both;
	float:left;
	width:100%;
	display:block;
	height:120px;
	position:relative;
}

ul.dash li {
	float:left;
	display:inline;
	margin:0 15px 15px 0;
}


ul.dash li a {
	display:block;
	width:106px;
	height:102px;
	text-decoration:none;
}

ul.dash li a img {
	display:inline;
	width:48px;
	margin-left:29px;
	margin-top:20px;
}

ul.dash li a span {
	display:block;
	width:100%;
	text-align:center;
	margin-top:10px;
	font-size:11px;
}

/* Tables */
table.fullwidth {
	width:100%;
	clear:both;
	font-size:13px;
	padding:1px;
	margin-bottom:10px;
}

table.normal {
	font-size:13px;
	padding:1px;
	margin-bottom:10px;
}
table.stats {
	font-size:11px;
	padding:1px;
	margin-bottom:10px;
        border:0;
}
table.stats thead {
	height:28px;
	text-transform:uppercase;
	font-size:10px;
}

table.stats td {
	padding:7px 0px 8px 8px;
	margin:1px 0;
}
table.fullwidth thead, table.normal thead {
	height:28px;
	text-transform:uppercase;
	font-size:10px;
}

table.fullwidth td, table.normal td {
	padding:7px 9px;
	margin:1px 0;
}
/* End of Tables */

#columns {
	display:block;
	width:100%;
}

#columns .cols2 {
	display:block;
	float:left;
	width:50%;
} 

#columns .cols3 {
	display:block;
	float:left;
	width:31%;
	padding:10px;
}

#columns .cols4 {
	display:block;
	float:left;
	width:25%;
}

.box {
	clear:both;
	float:left;
	width:90%;
}

/*NOTIFICATION MESSAGES*/
.message {
	display:block;
	padding:10px 20px;
	margin-bottom:15px;
}

.message p {
	width:auto;
	margin-bottom:0;
	margin-left:60px;
}

.message h2 {
	margin-left:60px;
	margin-bottom:5px;
}

.warning {
	background:#feffc8 url('../assets/icons/warning_48.png') 20px 50% no-repeat;
	border:1px solid #f1aa2d;
} 

.message p {
	color:#555;
}

.message h2 {
	color:#333;
}

.error {
	background:#fdcea4 url('../assets/icons/stop_48.png') 20px 50% no-repeat;
	border:1px solid #c44509;
}

.success {
	background:#d4f684 url('../assets/icons/tick_48.png') 20px 50% no-repeat;
	border:1px solid #739f1d;
}

.information {
	background:#c3e4fd url('../assets/icons/info_48.png') 20px 50% no-repeat;
	border:1px solid #688fdc;
}

.message:hover {
	cursor:pointer;
}
/* end of notification messages */

.portlet {
	padding:2px;
	margin-bottom:15px;
}


.portlet-header {
	font-weight:normal!important;
	/*display:inline;*/
	padding:5px 5px 5px 10px;
}

.portlet-content {
	padding:10px;
}

.ui-sortable-placeholder {
	padding:0;
	visibility:visible!important;

}

.input_field {
	display:block;
	margin-bottom:10px;
}

PaulOB · February 22, 2011, 3:50pm

You are making this a little awkward but the content should rise up if you remove the styles from bgwrap.


#bgwrap {
/*float:left;
    position:relative;
    width:100%;
    */
}

You have also used that id twice which is not allowed anyway.

cruelity93 · February 22, 2011, 4:15pm

If I do that my sidebar gets half white =/

PaulOB · February 22, 2011, 4:32pm

I can’t really tell as there are no images for me to see that effect.

If you are talking about the background on Content then you need to move it to #main instead (and adjust the background position if needed).


#content {
    float:right;
    width:100%;
    margin-left:-320px;
    position:relative;
    padding-bottom:30px;
}
#main {
    margin-left:320px;
    margin-right:30px;
    padding-top:30px;
    position:relative;
   [B] background: url('../assets/siderep.png') 185px 0 repeat-y;[/B]
}

It’s a bit hard to debug backgrounds without having the actual images present to see what’s going on.