2 Replies - 910 Views - Last Post: 21 October 2009 - 03:03 PM

#1 semaz   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 116
  • Joined: 24-November 08

Little Problem With CSS

Post icon  Posted 21 October 2009 - 02:12 PM

Hey everyboy

i'm facing a little problem with CSS

i'm making the layout of a website , i'm setting a big DIV tag

inside this DIV i need to put 3 other divs to split it horizontally

here's my HTML code :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spirit Of Islam</title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="main">

  <div class="banner">Banner</div>
	
	<div class="leftCol">
	 Left
	</div>
	<div class="middleCol">
	Middle
	</div>
	<div class="rightCol">
	  Right
	</div>
</div>
</body>
</html>




and here's my CSS file :

@charset "utf-8";
/* CSS Document */

.main
{
width:950px;
height:854px;
margin-left:150px;
margin-top:25px;
}

.banner
{
width:950px;
height:186px;
}

.leftCol
{
width:416px;
height:668px;
float:left;
}

.middleCol
{
width:359px;
height:668px;
float:left;
}

.rightCol
{
width:176px;
height:668px;
}




the problem is the final result i got 2 divs inside the big DIV and the 3rd one is below them , don't know why :angry:

can anyone helps ?

thx in advance

Is This A Good Question/Topic? 0
  • +

Replies To: Little Problem With CSS

#2 arthurakay   User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 226
  • Joined: 17-February 09

Re: Little Problem With CSS

Posted 21 October 2009 - 02:36 PM

I think it's because you're setting a width for every one of your elements, and you've added incorrectly.

the width for "main" is set at 950px.

leftCol = 416px
middleCol = 359px
rightCol = 176px

Adding those three together equals 951... which doesn't fit into something 950px wide. The browser is bumping an element down because it doesn't fit.
Was This Post Helpful? 0
  • +
  • -

#3 semaz   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 116
  • Joined: 24-November 08

Re: Little Problem With CSS

Posted 21 October 2009 - 03:03 PM

yeah i got it also :D :D , 1px makes me crazy :D

thx man :)

This post has been edited by semaz: 21 October 2009 - 03:03 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1