homepage Welcome to WebmasterWorld Guest from 54.196.196.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Basic alignment issues
Trying to align a left and a central div.
MLS_Andy




msg:4481113
 11:33 pm on Aug 1, 2012 (gmt 0)

Hi!

I'm trying to align two divs, starting at the same vertical height, but one to the left of the page and the other one (the wider one) centered. However I haven't been able to do so. In placing them both within a parent div, the left one will be above the central one; if I float the left div, on resizing it will climb over the central div's space; if I float them both, on resizing I'll again have the left div above the central one. Is there any way to achive this without floating the divs?

Maybe this is super obvious, but I haven't been able to figure this out yet... thank's for any help!

 

Paul_o_b




msg:4481301
 3:29 pm on Aug 2, 2012 (gmt 0)

Did you mean something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.sidebar {
float:left;
width:260px;
background:red;
min-height:200px;/* for testing*/
}
.content {
overflow:hidden;
width:660px;
margin:auto;
background:blue;
min-height:200px;/* for testing*/
}
.wrap {
overflow:hidden;
min-width:920px;/* must be the width of the left and centre columns to stop column dropping */
}
</style>
</head>

<body>
<div class="wrap">
<div class="sidebar">Left div</div>
<div class="content">Centre Test </div>
</div>
</body>
</html>


Or perhaps a 2 column layout like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.sidebar {
float:left;
width:260px;
background:red;
min-height:200px;/* for testing*/
}
.content { margin:0 0 0 270px; }
.mid {
width:460px;
background:blue;
min-height:200px;/* for testing*/
margin:auto;
}
.inner {
float:left;
width:100%
}
</style>
</head>

<body>
<div class="sidebar">Left div</div>
<div class="content">
<div class="inner">
<div class="mid">test</div>
</div>
</div>
</body>
</html>



The inner div isn't strictly necessary but avoids future clearing issues in the middle column.

MLS_Andy




msg:4481323
 4:43 pm on Aug 2, 2012 (gmt 0)

OMG! You are a genius! Well, at least to my eyes. Thank you so much! The first one was above perfect... thanks!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved