• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1016
  • Last Modified:

Keep div with nested divs from wrapping to a new line

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
0
clickclickbang
Asked:
clickclickbang
  • 2
  • 2
  • 2
2 Solutions
 
Mark StegglesWeb DeveloperCommented:
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
0
 
JezcentralCommented:
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.
0
 
clickclickbangAuthor Commented:
Thanks for your posts. Jezcentral - What should I do to gaurd against 20+ character words, etc. from wrapping to a new line?
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
clickclickbangAuthor Commented:
It looks like it was the padding issue. Good catch Steggs!
0
 
JezcentralCommented:
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.
0
 
Mark StegglesWeb DeveloperCommented:
I say, share the wealth

Glad you got it sorted clickclickbang, thanks for the A
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now