Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Keep div with nested divs from wrapping to a new line

Posted on 2006-10-23
6
968 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
0
Comment
Question by:clickclickbang
  • 2
  • 2
  • 2
6 Comments
 
LVL 30

Accepted Solution

by:
Steggs earned 300 total points
ID: 17788222
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
 
LVL 5

Assisted Solution

by:Jezcentral
Jezcentral earned 200 total points
ID: 17791043
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
 
LVL 1

Author Comment

by:clickclickbang
ID: 17791908
Thanks for your posts. Jezcentral - What should I do to gaurd against 20+ character words, etc. from wrapping to a new line?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 1

Author Comment

by:clickclickbang
ID: 17796130
It looks like it was the padding issue. Good catch Steggs!
0
 
LVL 5

Expert Comment

by:Jezcentral
ID: 17796247
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
 
LVL 30

Expert Comment

by:Steggs
ID: 17796266
I say, share the wealth

Glad you got it sorted clickclickbang, thanks for the A
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How do I set diff properties in a table row? 3 27
removing a class in javascript 4 50
Using Specialized Fonts in CSS 1 24
really easy css change help please 4 19
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question