Jump to content
WestX64

Need help aligning divs next to each other with CSS

Recommended Posts

Hello everyone!

 

I'm sure this probably seems like a simple issue to the more experienced HTML / CSS coders out there, but please bear with me as I'm just a beginner. Also, I have performed several Google searches on the issues and found a few people with similar questions but the solutions don't seem to work for me for whatever reason. So I have setup a simple bare bones example of what I'm trying to do and I will post the code below.

 

The HTML code:

<!doctype html><html>	<head>		<Title>Div Alignment Test</title>		<link rel="stylesheet" type="text/css" href="main2.css">	</head>		<body>		<div id="wrapper">			<div id="top">				<h1>Header</h1>			</div>						<div id="left">				<p>Left div set to 20 percent</p>			</div>						<div id="right">				<p>Right div set to 100 percent</p>			</div>		</div>	</body></html>

The CSS code:

#wrapper{	max-width: 800px;	min-width: 400px;	margin-left: auto;	margin-right: auto;}#top{	width:100%;	height: 100px;	background-color: green;	line-height: 100px;	text-align: center;}#left{	width: 20%;	float: left;	background-color: red;	height: 800px;}#right{	width: 80%;	float: left;	background-color: blue;	height: 800px;}

So what I am trying to do is have the #left div have a set width of 150px (for example) and the #right dive take up the rest of the space inside the #wrapper div so that the page will adjust when you make the browser window smaller. The way I have it right now works, but the #left div re-sizes too since its width is defined as a percentage. If I put a set width of say 200px, the #right div will drop down below the #left div. If I set the #left div to a smaller number like 100px, then the #right div sits next to it until you re-size the browser window to a certain point and then it drops below the #left div still...

 

I have tried playing with the float values and also the width values. I also noticed that if I have any kind of border or padding values specified, it will cause the #left div to drop below the #right div. I just cannot figure out how to make the #left dive maintain a set width while the #right div takes up the rest of the space inside of the #wrapper div. Any help would be much appreciated.

 

I have attached an image that shows what this code renders like so far.

 

post-181091-0-20388000-1423796019_thumb.png

Share this post


Link to post
Share on other sites

Set the width of the left column to the value you want. Float it left. Set the left margin of the right column to the same value that the width of the left column has, but adding the padding and margins of the left column to that value. Don't specify a width for the right column.

Share this post


Link to post
Share on other sites
#left    {    background-color: red;    height: 800px;    width: 20%;     max-width: 200px;      min-width: 100px;      float: left;    }         #right    {    background-color: blue;    height: 800px;    overflow:auto;    }

Try this...

Share this post


Link to post
Share on other sites
#wrapper{	position:relative;	max-width: 800px;	min-width: 400px;	margin-left: auto;	margin-right: auto;} #top{	positon:absolute;	top:0px;	left:0px;	right:0px;	height:100px;	background-color: green;	line-height: 100px;	text-align: center;} #left{	position:absolute;	top:100px;	left:0px;	width: 150px;	background-color: red;	height: 800px;} #right{	position:absolute;	top:100px;	left:150px;	right:0px;	background-color: blue;	height: 800px;}

This works for me.

Share this post


Link to post
Share on other sites

NEVER EVER USE POSITION ABSOLUTE! A BIGGGGGGG NO NO. You would only use position: absolute; for overlapping, or when you can't achieve the same result when using float, margins, padding, display: inline-block, which would be extremely rare.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...