Div Alignment Issue <solved>

buntrosgali · Post by **buntrosgali** » Tue Sep 23, 2008 12:35 pm

Hey guys

ive been teaching myself slowly the proper form of creating sites made of divs from scratch.

Here is a test page im using: Test page

the red and blue divs should be side by side but one is pushing the other one down, how can i fix this?

heres the coding

Stylesheet

/*
Theme Name:
Theme URI: http://www.
Description:
Author:
Author URI: http://www.

This theme was designed and built by

*/

/* =General
-----------------------------------------------------------------------------*/

/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;

}
body

{background: url(/uploads/images/background.jpg) repeat-x top center;

color: #333;
margin:0em; /* gives some air for the pagewrapper */
background-color: #000;
}
#master {
margin-left:auto;
margin-right: auto;
top:0px;
width:800px;
background-color:#FFFF00;
height:900px;
z-index:1;
}

#header {
margin-left:auto;
margin-right: auto;
left:147px;
top:0px;
width:800px;
background-color:#FF0000;
height:50px;
z-index:2;
text-align: center; align="center">
}

#image {
margin-left:10px;
margin-right: auto;
top:68px;
width:200px;
background-color:#0033CC;
height:208px;
z-index:3;
background-image: url(../images/img1.png); layer-background-image: url(../images/img1.png); border: 1px none #000000;

}
#over {
margin-left:380px;
margin-right: auto;
top:68px;
width:300x;
height:208px;
z-index:4;
background-image: url(../images/img2.png);
layer-background-image: url(../images/img2.png); border: 1px none #000000;
background-color:#00FF33;

}

you can view the source code in the view finder on the test page.

Any advice welcome

sn3p · Post by **sn3p** » Tue Sep 23, 2008 1:33 pm

Good thing you want to learn making websites from scratch. Let me give you some directions.
There are a few things you have to do and might want to take a look at.

First, remove all html code from the css file, it does'nt belong there:

Code: Select all

text-align: center; align="center"><img src="../images/img1.png" alt="img " width="50" .... </div>

Second, I noticed a lot of unnecessary css code. Try keeping the code clean.

Some tips:
- Try to avoid styling in the html, instead make use of css as much as possible.
- Try to keep your html/css code as clean and structured as possible.
- A good way to learn is trial on error, but try to understand what you are doing. Google it if necessary.

I made some adjustments to your code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Rumour Coffee</title>
		<link rel="stylesheet" type="text/css" href="test.css" />
	</head>
</__body>
<div id="master">
	<div id="header"><h1>Header</h1></div>
	<div id="left">Left</div>
	<div id="right">Right</div>
	<div class="clear"></div>
</div>
<__body>
</__html>

Code: Select all

* {
	margin: 0;
	padding: 0;
}

body {
	color: #333;
	background-color: #000;
}

#master {
	width: 800px;
	height: 600px;
	margin: 0 auto;
	background-color: #FFFF00;
}

#header {
	height: 80px;
	text-align: center;
	background-color:#FF0000;
}

#left {
	float: left;
	width: 200px;
	height: 200px;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	color: #fff;
	background-color:#0033CC;
}

#right {
	float: left;
	width: 550px;
	height: 200px;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	background-color:#00FF33;
}

.clear {
	clear: both;
}

Hope you can make some use of this, good luck

buntrosgali · Post by **buntrosgali** » Tue Sep 23, 2008 1:51 pm

cheers man i have actually got it working before i saw ur post, but i will look at what you are saying and take it into consideration for tidying the code up

buntrosgali · Post by **buntrosgali** » Thu Sep 25, 2008 9:47 am

I have used the code you gave me man although i changed one thing in it, but if you look at my site here site view it in firefox cus ie lies!!!

u can see that the green div is not showing the 10px margin-top gap like the blue div is, they should both be inline together, but as allways ie is showing it working fine.

any ideas how to overcome this small issue?

sn3p · Post by **sn3p** » Thu Sep 25, 2008 12:45 pm

Try this:

Code: Select all

#over {
   float: left;
   margin-top: 20px;
   margin-right: 10px;
   margin-left: 10px;
   width: 300px;
   height: 50px;
   background-image: url(../images/img2.png);
   background-color: #00FF33;
}

CMS Made Simple Forums

Div Alignment Issue <solved>

Div Alignment Issue <solved>

Re: Div Alignment Issue

Re: Div Alignment Issue

Re: Div Alignment Issue

Re: Div Alignment Issue <solved>