INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

absolute parent, children that expand width of parent up to max.

absolute parent, children that expand width of parent up to max.

absolute parent, children that expand width of parent up to max.

(OP)
Trying to achieve the following:

1. A parent container positioned absolute, because of reasons.
2. child elements that should be next to each other horizontally and push the parent width out. The number of child elements is dynamic but will not change after initial page load.
3. the above "pushing" is needed to prevent empty parent space in cases with less child elements, and should happen up to max-width value, then the child elements should wrap and continue on the next line.

to achieve 2 I can simply do display: inline-block on the child and white-space:nowrap on the parent, but this fails when there are too many children.

iv been trying different combinations of width, display, float en white-space but so far have only managed to either have all the children listed vertically, or horizontally further than max-width or have had a parent with lots of unused white space next to the few child elements.





site | http://thomassmart.com / http://tswwh.com
blog | http://weblog.thomassmart.com

RE: absolute parent, children that expand width of parent up to max.

Try this:

CODE --> CSS

#parent
	{
		position:absolute;
		max-width:xxx;
		
		background-color:#f2f2f2;
		padding:10px;
		overflow:hidden;
		
	}	

	#parent div.child	
	{
		width:100px;
		height:100px;
		float:left;
		border:1px solid #ffffff;
		border-radius:4px 4px;
		margin:5px;
		
	} 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: absolute parent, children that expand width of parent up to max.

Quote:

absolute parent, children that expand width of parent up to max

Absolute positioned elements are not in the document flow so are not affected by elements that are "flowed".

For the child elements to "flow" they will have to be floated or inline which will then require a ancestor element to have a fixed width. Because with the parent being absolute it will behave like an inline box and 'collapse' to the width of the child elements, thus losing the float.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: absolute parent, children that expand width of parent up to max.

Nope not quite. The Absolutely position parent will hapilly contain the floated elements. Giving it no specific width, and only a maximum width will allow the children to float side by side and when max width is reached drop down to a next row.

A fixed width is not required at all. As you can see in my example.

An absolutely positioned element is not affected by other flowed elements outside of it, but will be affected by elements contained with in it.

So yes the example above works.

Full HTML:

CODE

<!DOCTYPE HTML>
<html>
<head>
	<title>ParentTest</title>
<style type="text/css">
	html,body
	{
		width:100%;
	}
	#parent
	{
		position:absolute;
		max-width:1000px;
		
		background-color:#f2f2f2;
		padding:10px;
		overflow:hidden;
		
	}	

	#parent div.child	
	{
		width:100px;
		height:100px;
		float:left;
		border:1px solid #ffffff;
		border-radius:4px 4px;
		margin:3px;
		
	}
	
	#parent div.child h1
	{
		font-size:12px;
		font-family:"sans serif";
		padding:5px;
		
			
	}
</style>
</head>
<body>
	<div id="parent">
		<div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div><div class='child'><h1>CHILD</h1></div>	</div>
</body>
</html> 

Tested in FF, Chrome and even IE8.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: absolute parent, children that expand width of parent up to max.

Yes, missed out that max-width OR a fixed width ancestor will constrain the parent and therefore the child float.

Moral of the story is: Don't accept a spare slice of Dominos pizza while at the keyboard.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: absolute parent, children that expand width of parent up to max.

Quote:


Yes, missed out that max-width OR a fixed width ancestor will constrain the parent and therefore the child float.

Which is exactly what the OP wants

Quote:


child elements that should be next to each other horizontally and push the parent width out. The number of child elements is dynamic but will not change after initial page load.
3. the above "pushing" is needed to prevent empty parent space in cases with less child elements, and should happen up to max-width value, then the child elements should wrap and continue on the next line.


Once the max-width is reached the floats will drop down one row while still being inside the Parent.
And the ancestor will not affect the absolutely positioned parent unless its positioned itself. And even then then constraint is the wanted result.

So who was accepting a pizza while answering a post?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: absolute parent, children that expand width of parent up to max.

Quote:

So who was accepting a pizza while answering a post?

Me, I soon get distracted when there is food being offered :)

Just as long as there is no anchovies or olives involved of course.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: absolute parent, children that expand width of parent up to max.

Loose the positioning on Container2 and on the .menu li. No reason to have those that I can see. And since they are positioned they will affect the positioned children below them, which means the width of the container2 div is affecting the ability of the inner submenu div to expand. Remove their positioning and it should work as expected.

A general word of advice: Unless you need to absolutely position an element very specifically avoid positioning all together. In your case you probably only need the absolute position for your hiding menu and nothing else.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: absolute parent, children that expand width of parent up to max.

Quote (ThomasJSmart)

ah, i need that one absolute because there is one under/next to it that needs to scale with the width of the screen.

Surely it should be the one that is "under/next" is the one that needs to be out of the flow.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: absolute parent, children that expand width of parent up to max.

(OP)

it is out of the flow, isnt it?

it needs to fill the available page width.
container 1 is relative so that container 2 can be absolute and in the correct location with top/left 0
container 2 is absolute so that it (visually) sits to the side of container 3
container 3 has no position, it just fills out the width, with margin left to give the impression of being next to container 2.


site | http://thomassmart.com / http://tswwh.com
blog | http://weblog.thomassmart.com

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close