3 replies [Last post]
Tesla
Tesla's picture
Offline
newbie
Last seen: 11 years 4 weeks ago
Timezone: GMT-5
Joined: 2009-05-13
Posts: 3
Points: 3

Hi, everyone. I'm having a problem with my div inside the container. I'm simply playing around with the codes to have an official/flexible personal method when constructing a site. I have a container div, and in it I have another div. I have put 100% width and height on the container DIV so it could fit on any resolution screen.

Now there's no problem with the aligning of the inner div when my browser is maximized, but when I re-size it smaller, I notice that the inner div simply goes past the container div. I would like for that not to happen, I would like if it would just stay put where I aligned it when the screen is re-sized. Here is my code:

<html>
 
<head>
 
<title>CSS Testing</title>
 
<style type="text/css">
 
html, body {
	height: 100%;
}
 
DIV.Container {
	width: 100%;
	min-height: 100%;
	position: relative;
	border: 1px solid #000000;
}
 
div.Header {
	position: absolute;
	left: 100px;
	top: 100px;
	width: 1100px;
	height: 500px;
	border: 1px solid #000000;
	background-color: #990000;
}
 
</style>
 
</head>
 
<body>
 
<DIV class="Container">
 
	<div class="Header">
 
	</div>
 
</DIV>
 
</body>
 
</html>

Thanks.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If in inner div you refer to

If in inner div you refer to #header then you have made it position absolute and given it a fixed width. When you state resize browser I assume you refer to width? if so then the #header has to overflow the parent it has no choice. You might try removing position absolute and the width, why do you need position absolute is there a real reason?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tesla
Tesla's picture
Offline
newbie
Last seen: 11 years 4 weeks ago
Timezone: GMT-5
Joined: 2009-05-13
Posts: 3
Points: 3

Oh, I've placed a position:

Oh, I've placed a position: absolute; in the .Header because I wanted to move it just a little bit downwards from the top and a little bit from the left. When I take off absolute positioning it just goes to it's default place, then I can't tell when I re-size the browser if it has the potential to overflow the container.

When I re-size the browser with the restore button, what usually happens is the browser window will shrink in height and width, so I'm left with an overflowing inner div. I would like to know how to not let it overflow my container div and stay basically where I put it when the browser window was maximized.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It will overflow regardless

It will overflow regardless (except in IE6)

if you are going to state a fixed width then it will overflow a parent that is viewport width dependent.

I think that you are possibly working to some misconceptions about properties. It would be best if you describe what you are trying to achieve with your layout, at the moment you seem to want fixed widths in a fully fluid layout which isn't going to happen or at least not unless you state some min/max dimensions for parent elements.

Can you describe the intended layout further, but not how you think it might be achieved simply the look and behaviour of it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me