Div positioning issue

Page 1 of 1

2 Replies - 353 Views - Last Post: 13 December 2012 - 01:23 PM

#1 ronanbrowne88  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 21-November 12

Div positioning issue

Posted 13 December 2012 - 12:36 PM

Ok im newish to html and have been working on a basic web page and having a problem with div positioning that's driving me mad .
I have a container div, a header, a left side bar and a right sidebar and a main and a footer div.
I want to get the two sidebar divs either side of the main with the footer underneath, so these side bars are acting as a kind of border for my main content, left side bar is fine i can get that in place with float:left but right sidebar div is just not happening for me, at the moment i have it inside the main div and use position:relative; bottom:124px; to get it in place but any time i alter the content of the main div it seems to move it, i just want that right hand border to stay in place parallel to the left one on the other side of page any ideas.and ya i dont have anything in either of those sidebars yet besides a heading .


<!DOCTYPE html>
<html>
<head>
<title>
Ringsend Pizza Co. Index
</title>
<link rel="stylesheet" type="text/css" href="Css/pizzacss.css" /> 
</head>

<body>
<div id = "container">

<div id = "header">
<img src = "resources/images/pizza2.gif" alt="pizza" style = "width:10% ; height:90px ; float: right;position: absolute; top:0px;left:0px;"/>
<h1>Ringsend Pizza Co.</h1>
<img src = "resources/images/pizza7.png" alt="pizza" style = "width:10%; height:90px ; float: right;position: absolute; top:0px;right:0px;"/>
</div>
<div id = "sidebar">
<b>Links</b>

</div> 

<div id = "main">


<h2>Welcome to Ringsend Pizza situated in Dublin 4 </h2>
<p style = "margin: 0">Were dedicated to bringing you only the finest pizza<br/>
made with the freshest ingredients instore come check us out<br/>
we are located in Ringsend Dublin 4
</p>

<div id = "rightbar">
<b>Links</b>
</div> 



</div>


<div id="footer">
<img src = "resources/images/pizza4.png" alt="pizza" style = "width:10%; height:90px ; position: absolute; right:0px;"/>
Copyright RingsendPizza 2012

<img src = "resources/images/pizza6.png" alt="pizza" style = "width:10% ; height:90px ; position: absolute; left:0px;"/>
</div>
</div>


</body>

</html>


the relative css

#sidebar{
	width:10%;
	height:300px;
	margin:0 auto;
	float:left;
	background-image:url('sidebar.png');
    background-color:#cccccc;
}

#rightbar{
	width:10%;
	height:300px;
	margin;0 auto
	background-color:#DDECEF;
	float:right;
	position:relative;
    bottom:124px;
	background-image:url("sidebar.png");
	background-color:#cccccc;
	
	
}		

#main{
width:90%;
height:300px;
float:left;



}


Is This A Good Question/Topic? 0
  • +

Replies To: Div positioning issue

#2 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 91
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: Div positioning issue

Posted 13 December 2012 - 01:14 PM

Alright, I think I understand where you are going with this. Allow me to point some things out.

First off, if you add up the width percentages of your divs, they equal 110%? 90 + 10 + 10 = 110. You need to shrink your main div to 80%.

Second, there is no reason to be applying margin: 0 auto to your sidebars here. That's something you would apply for automatic centering.

Third, if you shrink the main div to 80% and then move the right div outside of it, the right sidebar will not be altered when you fiddle with the main div content.

Here is some CSS:

#sidebar{
	width:10%;
	height:300px;
	float:left;
	background-image:url('sidebar.png');
    background-color:#cccccc;
}

#rightbar{
	width:10%;
	height:300px;
	background-color:#DDECEF;
	float:left;
	background-image:url("sidebar.png");
	background-color:#cccccc;
	
	
}		

#main{
width:80%;
height:300px;
float:left;



}

Was This Post Helpful? 1
  • +
  • -

#3 ronanbrowne88  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 21-November 12

Re: Div positioning issue

Posted 13 December 2012 - 01:23 PM

Ah thank you,that seems to have done the job!!
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1