We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Keep div with nested divs from wrapping to a new line

clickclickbang
on
Medium Priority
1,049 Views
Last Modified: 2012-08-14
Experts, I have a div with three divs inside of it using float:left; and the parent div width of 100%. Then I have text inside each of the child divs. Here's the problem, depending upon the browser's width and the width of the text, the third child div will wrap to a new line. I need to do something so that the div will not wrap based upon the width of the browser. However, I need to have 100% width on the parent div so that it does take up full width of the browser.

Any ideas are appreciated!

~ C
Comment
Watch Question

Web Developer
CERTIFIED EXPERT
Top Expert 2006
Commented:
Greetings clickclickbang,

You could apply a min-width to the parent div that is greather than the width when the float drops. Unfortunately ie6 doesnt recognise min-width. So, this may be a solution for the future

I presume your floated divs are using % widths aswell? There must be a reason why one is dropping when the browser is resized? Are you taking into account borders and padding? For example, instead of applying padding to the floats, apply margin to their contents.

Regards

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
This example shows floats in IE. As Steggs has said, they shrink to fit the available screen as you change the window size if they are set to percentage width. If you go with his suggestion that should do the trick.

However, my two pence worth is if there is anything within the divs, (perhaps an image, or a word with 20+ characters) that stops the nested divs getting smaller, then they will break to the next line. Perhaps this is what is happening?

<html>
<head>
<title>title</title>
</head>
<body>

<div style="width: 100%;">
      <div id="div1" style="width: 33%; float: left;">1</div>
      <div id="div2" style="width: 33%; float: left;">2</div>
      <div id="div3" style="width: 33%; float: left;">33333333333333333333</div>
</div>

</body>
</html>

Jezcentral.

Author

Commented:
Thanks for your posts. Jezcentral - What should I do to gaurd against 20+ character words, etc. from wrapping to a new line?

Author

Commented:
It looks like it was the padding issue. Good catch Steggs!
You can't stop them wrapping to a new line unfortunately. This is normally caused by an image (like a header image) which prevents the div width from getting any smaller.

Thank you for the points, but if it was Steggs who came up the right answer, then all the points should really have gone to him. :)

Jezcentral.
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
I say, share the wealth

Glad you got it sorted clickclickbang, thanks for the A
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.