div inside div not rendering properly

Question

hsmukunda 0 Newbie Poster

13 Years Ago

I want an div inside div.
The code of html is

<!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"  lang="en-US">
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<title>
</title>
</head>
<body class="body">
<div id="container">
	<div id="masthead">
	</div>
	<div id="right-upper-navigation">
	</div>
	<div id="right-navigation">
	</div>
	
</div>
<div id="footer">
	</div>
</body>
</html>

CSS is

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
		width: 1024px;
		height:968px;
		border: 1px solid black;
		background: white;
		
		
	}
#container{
		width: 984px;
		height:748px;
		margin-left:20px;
		margin-right:20px;
		margin-top:20px;
		/*margin-bottom:20px;*/
		background:orange;
		border: 1px solid black;
		}

#right-navigation{
		width:290px;
		height:658px;
		/*margin-top:90px;/*this space is for right upper navigation*/
		margin-left:694px;/*694 px margin beccause to set the div on to right side 694+290=984 which is total width of the container div */
		background:#E9E9E9;/*light blue colour*/
		border: 1px solid black;
		}
#right-upper-navigation{
		width:290px;
		height:90px;
		margin-left:694px;
		background:#968B79;
		border: 1px solid black;
}

#masthead{
		margin-top:40px;
		width:690px;
		height:90px;
		/*margin-right:90px;*/
		background:green;
		border: 1px solid blue;
}
#footer{
		width:1024px;
		height:200px;
		background:#968B79;/*footer with dark grey colour*/
		}

I am trying to get output like in first screenshot but it is displaying as shown in second screenshot.
Let me know how to set right this problem.
thanks

perl web-design

6 Contributors
8 Replies
247 Views
5 Months Discussion Span
Latest Post 13 Years Ago Latest Post by twiss

drjohn 56 Posting Pro in Training

13 Years Ago

You should be using floats for this layout! Otherwise each div will automatically appear below the previous one, which is what you are getting with your current code.

#right-navigation{
		width:290px;
		height:658px;
		/*margin-top:90px;/*this space is for right upper navigation*/

		background:#E9E9E9;/*light blue colour*/
		border: 1px solid black;
float:right;
		}
#right-upper-navigation{
		width:290px;
		height:90px;
		
		background:#968B79;
		border: 1px solid black;
float:right;
}

#masthead{
		margin-top:40px;
		width:690px;
		height:90px;
		/*margin-right:90px;*/
		background:green;
		border: 1px solid blue;
float:left;
}

So I've deleted your margins on the right hand divs and floated them right, and floated the masthead left.

PS this bit is silly
<body class="body">.....
it is just <body>

Apply any body styles directly to the body tag itself in the css, as you have actually done. But drop that height you have given the body, it will lead to problems later.

PPS and setting margin:auto for the body will center the design in the browser window - not everyone works with a viewport of 1024px, some users have it wider.

Edited 13 Years Ago by drjohn because: n/a

Dragennd 12 Light Poster

13 Years Ago

The thread is kinda-sorta jumbled so I can't tell if its solved or not but you might consider using the z-index tag. Pretty much you can use that to layer everything one after the other. 1 is the lowest layer and the higher the number the higher in the stack it is.

For a reference look at the layout of the layers used in my website http://mastersofzi.110mb.com

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

hsmukunda 0 Newbie Poster · Answer 1 · 2010-12-20T20:47:41+00:00

thank you very much.

the width and height I had specified so later in css I can specify height and width in percentage, rather than pixels. Even if I change the dimension the layout should hold good, Is there any other way.

Also what needs to be done if an div is to be made to sit on two other divs as attached in the screenshot.

I tried but the white div as posted on screenshot is not coming over to the right side div.
thanks.

hsmukunda 0 Newbie Poster · Answer 2 · 2010-12-20T20:54:30+00:00

solved, adding position:absolute; will render one div on two other divs.
But can I know the steps if I want to convert into fluid layout than rigid layout.
thanks.

muthu_sept82 0 Newbie Poster · Answer 3 · 2010-12-21T02:10:15+00:00

Please just add the float left in masthead.

#masthead{
margin-top:40px;
width:690px;
height:90px;
/*margin-right:90px;*/
background:green;
border: 1px solid blue;
float:left;
}

You will get solution.....

hsmukunda 0 Newbie Poster · Answer 4 · 2011-05-27T00:32:09+00:00

Hi

encountering rendering problems for IE for rounded corners.

Images attached.

We can clearly see in IE the part of below rounded corner appears next to Search caption in image.
But in Firefox it renders properly.

quick-search.gif is used for getting rounded corners.

#quick_search .top{
width:280px;
height:9px;
overflow:hidden;
background:url(../Images/quick-search.gif) no-repeat 0 0;
}


#quick_search .bottom{
width:280px;
height:9px;
overflow:hidden;
background:url(../Images/quick-search.gif) no-repeat 0 -9px;
float:right;
}

Any help would be appreciated.

thanks

almostbob 866 Retired: passive income ROCKS · Answer 5 · 2011-05-29T22:32:50+00:00

The thread is kinda-sorta jumbled so I can't tell if its solved or not but you might consider using the z-index tag. Pretty much you can use that to layer everything one after the other. 1 is the lowest layer and the higher the number the higher in the stack it is.
For a reference look at the layout of the layers used in my website

-infinity < z-index < +infinity, default 0
much broader range than expressed, with an appropriate number of discrepancies in IE handling (as always)

twiss 155 Veteran Poster · Answer 6 · 2011-05-30T01:15:01+00:00

Also, remove outline: 0; . It serves no purpose other than making your site less user friendly.