trying to understand sizing in css

Question

0.00/5 (No votes)

See more:

Hello,
I'm just experimenting with css, and I don't understand why in this example the mainbox sizes to it's content horizontally, but not vertically. Is there a way to do this?
Thanks

HTML

<!DOCTYPE html>
<HTML>
<HEAD>
<STYLE>
.mainbox {
	background-color:yellow;
	border:solid 5px black;
	min-width:100px;
	max-width:300px;
	min-height:100px;
	max-height:300px;
	padding:0px;
	margin:0px;
	top:100px;
	left:100px;
	position:relative;
	width:auto;
	height:auto;
}
.tall {
	background-color:lightgreen;
	border:dotted 2px green;
	opacity:0.5;
	filter:alpha(opacity=50);
	height:300px;
	width:10px;
	position:absolute;
	left:0px;
	top:0px;
}
.wide {
	background-color:lightblue;
	border:dotted 2px blue;
	opacity:0.5;
	filter:alpha(opacity=50);
	height:10px;
	width:300px;
	position:absolute;
	left:0px;
	top:0px;
}
</STYLE>
</HEAD>
<BODY>
<DIV class="mainbox">
	<DIV class="wide"></DIV>
	<DIV class="tall"></DIV>
</DIV>
</BODY>
</HTML>

Posted 22-Jun-13 23:36pm

philthe

Add a Solution

Comments

Mahesh Bailwal 23-Jun-13 8:32am

I not expert in CSS but its seems to me it’s behaving so because div is a block element, that is div will expand 100% of its container in width. Add display : inline-block style in .mainbox class you will see the difference.

Check below link
http://www.w3schools.com/CSSref/pr_class_display.asp

philthe 23-Jun-13 9:06am

Thanks Mahesh.
When I changed mainbox to display:inline-block this did not help. Both the width and height then went to the minimum. However this has led me to the answer I think.
The main problem was that the wide and tall divs were using position:absolute. I thought that the horizontal sizing was working, but it wasn't. It was just going to the maximum. If I change these to position:relative, the vertical sizing then worked, and then adding display:inline-block to mainbox as you suggested makes it work for the horizontal too.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Nov-13 12:07pm

Check out my answer - Solution 3. You problem is fixed now. :)

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Alexanbu · Answer 1 · 2013-11-19T03:22:00

Solution 1

try this link

http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts[^]

Posted 19-Nov-13 3:22am

Alexanbu

Nick Fisher (Consultant) · Answer 2 · 2013-11-19T05:12:00

Set your widths and heights to percentages, not pixels:

CSS

.tall 
{
	background-color:lightgreen;
	border:dotted 2px green;
	opacity:0.5;
	filter:alpha(opacity=50);
	height:100%;
	width:10px;
	position:absolute;
	left:0px;
	top:0px;
}
.wide 
{
	background-color:lightblue;
	border:dotted 2px blue;
	opacity:0.5;
	filter:alpha(opacity=50);
	height:10px;
	width:100%;
	position:absolute;
	left:0px;
	top:0px;
}

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 3 · 2013-11-19T06:06:00

Refer- CSS Positioning[^]

Quote:
Absolutely positioned elements can overlap other elements.

So, I just commented out absolute positioning from the child divs and max-height from parent div.

Check out the Demo- [Demo] Div Auto Adjust Height Problem[^].

Quote:
// Commented CSS Codes are
// ------------------------------------------
// In class ".mainbox", /*max-height:300px;*/
// In class ".tall", /*position:absolute;*/
// In class ".wide", /*position:absolute;*/
// ------------------------------------------

// After these fixes, now parent div adjusts its height correctly according to the child divs.

Arnaldo P. Castaño · Answer 4 · 2013-11-19T08:33:00

Probably because you are mixing absolute measures with relative measures and when you assign an absolute measure it forces the element to go out of the parent box. In the previous case mainbox has a max-height=300px if any of the children of that div requires more space then it will go out of its parent region.

trying to understand sizing in css

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0