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

floating div issue

hi EE,
I have a simple floating issue with two divs I have,
see the complete code below.
The two divs float as expected but when the browser width is too small for the divs they wrap around.  I need them to float beside each other (like they do) but even if the browser width is too small.
what css am I missing??  i've tried white-space: nowrap but it doesnt work for me by placing the code in the two divs.

please advise.
thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled Page</title>
    <style>
        .left-panel
        {
            border: 1px solid red;
            width: 300px;
            padding: 10px;
            float: left;
        }
        .right-panel
        {
            border: 1px solid red;
            width: 300px;
            padding: 10px;
            float: left;
        }
    
    </style>
</head>
<body>
 
    <div class="left-panel">
        here 1
    </div>
    <div class="right-panel">
        here 2
    </div>
 
</body>
</html>

Open in new window

0
jimbona27
Asked:
jimbona27
1 Solution
 
yo_s_cantaCommented:
You need set overall with Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled Page</title>
    <style>
        .left-panel
        {
            border: 1px solid red;
            width: 300px;
            padding: 10px;
            float: left;
        }
        .right-panel
        {
            border: 1px solid red;
            width: 300px;
            padding: 10px;
            float: left;
        }
    	#all {
			width:644px;
		}
    </style>
</head>
<body>
 <div id="all">
    <div class="left-panel">
        here 1
    </div>
    <div class="right-panel">
        here 2
    </div>
 </div>
</body>
</html>

Open in new window

0
 
jimbona27Author Commented:
thanks!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

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