Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.
ThomasJSmart

ThomasJSmart

Programmer
Sep 16, 2002
634
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 | / blog |
 
Sort by date Sort by votes
Try this:

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
 
Upvote 0 Downvote
absolute parent, children that expand width of parent up to max
Click to expand...

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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Yes, missed out that max-width OR a fixed width ancestor will constrain the parent and therefore the child float.
Click to expand...

Which is exactly what the OP wants

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.
Click to expand...


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
 
Upvote 0 Downvote
So who was accepting a pizza while answering a post?
Click to expand...

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
 
Upvote 0 Downvote
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Upvote 0 Downvote
ThomasJSmart said:
ah, i need that one absolute because there is one under/next to it that needs to scale with the width of the screen.
Click to expand...

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
 
Upvote 0 Downvote
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 | / blog |
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
122
Alt255
Alt255
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
400
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
351
bdwilcox
bdwilcox
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
345
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
691
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top