9 replies [Last post]
reyes99
reyes99's picture
Offline
newbie
Miami Lakes
Last seen: 8 years 9 weeks ago
Miami Lakes
Timezone: GMT-4
Joined: 2012-08-14
Posts: 5
Points: 6

Hi, I am have a CMS site and I am having problems with aligning DIVs. The main content is starting bellow the two boxes to the right of it. I want it to align right under the menu bar so that everything is aligned. I am kind of new to css and I have been trying to figure this out all day and searching all over the internet but nothing works.

------------------------------------
| Header |
------------------------------------
| menu bar |
------------------------------------
| left | | bx1 | ad |
| menu | |_____ | bar |
| | | bx2 | |
| |___________|_____ | |
| | main | | |
| | starting | | |
| | here | | |
------------------------------------
| footer |
------------------------------------

this is what i have for CSS not including the header, footer or menu bar

    #main {
       margin-left: 180px;
       margin-right: 775px;
    }
    #lsidebar {
        border: 1px solid blue;
	width: 150px;
	position: absolute;
	left: 0px;
	top: 112px;
	bottom: 58px;
    }
    #lsidebar a{
        font-family:"Arial", Arial, sans-serif ;
        line-height:1.5;
        padding-left: 7px ;
    }
    #sidebar {
	float:right;
	width:160px;
	padding:10px;
	background:#F5F5F5;
	border-style:solid;
	border-width:1px;
	top: 78px;
	bottom: 50px;
    }
    #main_r1c2 {position: relative; top: 10px; margin-left: auto; margin-right: 190px; width: 350px; }
    #main_r2c2 {position: relative; top: 10px; margin-left: auto; margin-right: 190px; width: 350px; }
    .box_panel_white { border:1px solid #d3dbe0; background:#ffffff; padding:8px; text-align:left; margin-bottom:10px; }
    .box_title {font:12px Verdana; color:#046075; text-transform:uppercase; text-align:left;  margin-bottom:10px; }
    .realestate_thumb { width:95px; height:70px; border:1px solid #ccc; }

Thanks in advance

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hello, I am sorry, but i

Hello,

I am sorry, but i didnt understand the question. Could you please show us a live example of what you are trying to do?

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

reyes99
reyes99's picture
Offline
newbie
Miami Lakes
Last seen: 8 years 9 weeks ago
Miami Lakes
Timezone: GMT-4
Joined: 2012-08-14
Posts: 5
Points: 6

Aligning DIVs

Hi Sorry here is an image of my screen. I am trying to align the Local business DIV to the top. It is moving bellow the two boxes on the right of it.

Thanks

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hello, I really cannot tell

Hello,

I really cannot tell you without looking at the html part also, though one thing i noticed is your #main{margin-right:775px;}

I am pretty sure that is a problem.

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

reyes99
reyes99's picture
Offline
newbie
Miami Lakes
Last seen: 8 years 9 weeks ago
Miami Lakes
Timezone: GMT-4
Joined: 2012-08-14
Posts: 5
Points: 6

Problem Aligning DIVs

ok here is the html source and the full css. Sorry it's a little messy still in rough draft...

Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>
        Miami Lakes Portal    </title>
	<meta name="description" content="Get all the information you need about Miami Lakes" />
	<meta name="copyright" content="Copyright (c) 2012 Rafael Reyes" />
	<meta name="author" content="Rafael Reyes" />
	<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /></head>
<body>
<div id="wrap">
	<div id="header"><div id="header-content">
    <h1>
    <img src="images/Logo.jpg" /></img></span><br />    </h1></div></div>
	<div id="content">
	<div id="nav">
		<ul>
			<li><a href="index.php?p=Home" >Home</a></li><li><a href="index.php?p=about_miami_lakes" >About Miami Lakes</a></li><li><a href="index.php?m=advertise" >Advertise with Us</a></li>		</ul>
	</div>	<div id="lsidebar">
	    <!--- Left Sidebar to create the menu --->
		<a class="small" href="index.php?p=Home" >Home</a><br /><a class="small" href="index.php?p=about_miami_lakes" >About Miami Lakes</a><br /><a class="small" href="index.php?p=restaurants" >Restaurants</a><br /><a class="small" href="index.php?p=businesses" >Local Businesses</a><br /><a class="small" href="index.php?p=events" >Events</a><br /><a class="small" href="index.php?p=auto-sales" >Auto Sales</a><br /><a class="small" href="index.php?p=movies" >Movies</a><br /><a class="small" href="index.php?p=local-jobs" >Local Jobs</a><br /><a class="small" href="index.php?p=realestate" >Real Estate</a><br /><a class="small" href="index.php?p=schools" >Schools</a><br /><a class="small" href="index.php?p=lost-pets" >Lost Pets</a><br /><a class="small" href="index.php?p=hospitals" >Hospitals</a><br /><a class="small" href="index.php?p=local-news" >Local News</a><br /><a class="small" href="index.php?p=local-weather" >Local Weather</a><br /><a class="small" href="index.php?m=advertise" >Advertise with Us</a><br />	</div>	<div id="sidebar">
	    <!--- Create an ad Rotator here --->
		<a target="_blank" href="http://ims99.trafficfb.hop.clickbank.net">
		<center><img border="0" src="images/fb_hyper_traffic.jpg" /></a></center>			</div>
<div id="main_r1c2"><div class="box_panel_white">
            <div class="box_title"><div id="icon8"></div>Miami Lakes Real Estate</div>
            <a href="index.php">
            <img src="images/realEstate/home1.jpg" class="realestate_thumb" /></a>
            <a href="index.php">
            <img src="images/realEstate/home2.jpg" class="realestate_thumb" /></a>
            <a href="index.php">
            <img src="images/realEstate/home3.jpg" class="realestate_thumb" /></a>
            <a href="index.php">
            <img src="images/realEstate/home1.jpg" class="realestate_thumb" /></a></div>
</div><div id="main_r2c2"><div class="box_panel_white">
            <div class="box_title"><div id="icon8"></div>Miami Lakes Autos</div>
            <a href="index.php">
            <img src="images/autos/auto1.jpg" class="realestate_thumb" /></a>
            <a href="index.php">
            <img src="images/autos/auto2.jpg" class="realestate_thumb" /></a>
            <a href="index.php">
            <img src="images/autos/auto3.jpg" class="realestate_thumb" /></a>
            <a href="index.php">
            <img src="images/autos/auto4.jpg" class="realestate_thumb" /></a></div>
</div>	<div id="main"><h2>Local Businesses</h2><p>Enter Body text here...</p></div> <!-- main --></div> <!-- content --> 
 
<div class="push"></div>	<div id="footer"><div id="footer-content">
		<center><p>Copywrite Miami Lakes Portal 2012</p></center>
	</div></div>
 
</body>
</html></div> <!-- wrap -->

CSS Output

html, body {
 
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
	}
 
	#content {
		height: 100%;
	}
 
	#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
	}
	#header {
	width:100%;
	height: 80px;
	}
	#header-content {
		border: 1px solid blue;
		height: 63px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
		padding: 8px;
	}
	#header h1 {
		margin:0 0;
		padding:0px 10px;
	}
	#header h4 {
		margin:0 0;
		padding:0px 10px;
	}
	#main {
 
	   margin-left: 180px;
	   margin-right: 775px;
    }
    #wrapper{
     width:inherit;
     float:left;
     bottom:0px;
     position: relative;
     padding: 0 0 0 0;
     overflow: auto;
    }
    #main_r1c2 {position: relative; top: 10px; margin-left: auto; margin-right: 190px; width: 350px; }
    #main_r2c2 {position: relative; top: 10px; margin-left: auto; margin-right: 190px; width: 350px; }
    .box_panel_white { border:1px solid #d3dbe0; background:#ffffff; padding:8px; text-align:left; margin-bottom:10px; }
    .box_title {font:12px Verdana; color:#046075; text-transform:uppercase; text-align:left;  margin-bottom:10px; }
    .realestate_thumb { width:95px; height:70px; border:1px solid #ccc; }
 
	#nav {
		padding:7px 10px;
		background:#6699FF;
	}
	#nav a { 
		 color: #FFFFFF;
	}
	#nav ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	#nav li {
	   display:inline;
		margin:5px;
		padding-right: 10px;
	}
	#inline li{
	display:inline;
	float:left;
	position:relative;
	margin-left:1px;
	margin-right:10px;
	}
 
	#lsidebar {
		border: 1px solid blue;
		width: 150px;
		position: absolute;
		left: 0px;
		top: 112px;
		bottom: 58px;
	}
    #lsidebar a{
        font-family:"Arial", Arial, sans-serif ;
        line-height:1.5;
        padding-left: 7px ;
    }
    #lsidebar a:hover
    {
 
    background-color:lightcyan;
    }
 
    #sidebar {
		float:right;
		width:160px;
		padding:10px;
		background:#F5F5F5;
		border-style:solid;
		border-width:1px;
		top: 78px;
		bottom: 50px;
	}
 
	#footer {
	clear: both;
    height: 50px;
	}
	#footer-content {
		border: 1px solid blue;
		height: 42px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
		padding: 8px;
		background:#ddd;
	}
	.push {
    height: 66px;
    clear: both;
	}  
	#footer p {
		margin:0;
    }
 

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Another problem i see when i

Another problem i see when i see the HTML code you have posted. the </div> ends after the </html> code!

Thats a big problem! just testing out your problem on my local browser.

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hello, I am really sorry! but

Hello,

I am really sorry! but this is a code I am not really going to try and debug this problem! am sorry, but this code is really not the way you should create an html page.

You should read up on Fluid / Liquid HTML Layout.

Take a look at this, and try to implement your design.

Sorry, but giving margins and using absolute positions and trying to fix it, is really not my thing Smile

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

reyes99
reyes99's picture
Offline
newbie
Miami Lakes
Last seen: 8 years 9 weeks ago
Miami Lakes
Timezone: GMT-4
Joined: 2012-08-14
Posts: 5
Points: 6

DIVs not Aligning

I understand. I am new to html and css and have been kind of piecing pieces together try to get it to work.

Thanks for your help and I will read about Fluid / Liquid HTML Layout. I guess I have to redesign everything.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hello, Give me a couple of

Hello,

Give me a couple of hours, and I will write a HTML tutorial for you. Just try and readup on fluid layouts till then.

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

reyes99
reyes99's picture
Offline
newbie
Miami Lakes
Last seen: 8 years 9 weeks ago
Miami Lakes
Timezone: GMT-4
Joined: 2012-08-14
Posts: 5
Points: 6

DIVs not Aligning

wow, thank you so much for the info. I found a great tutorial on Liquid Layouts

Posting it here to share with anyone that might need some help on the subject
http://www.maxdesign.com.au/articles/liquid/

This is exactly what I was looking for.

Thanks for all your help.