Solved

Keep div with nested divs from wrapping to a new line

Posted on 2006-10-23
6
965 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular JS Route 3 68
WordPress Themes 10 41
To remove highlight from a "a href" 5 30
Changing way home page shows 2 29
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…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

785 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