CSS Float overflow

Question

I have this sample html

 <html>
     <head>
        <style type="text/css">
            .div-menu
            {
                width:300px;
                margin-left:20px;
                margin-right:20px; 
                float:left;
                border:thin solid;      
                min-height:600px;
                height:auto;
            }

            .div-content
            {
                float:left;
                min-width:700px;
                width:auto;
                border:thin solid;         
                min-height:600px;
                height:auto;          
                padding-right:20px;
            }   
        </style>
     </head>

     <body>
        <div style="margin-top:50px;padding:10px;">
            <div class="div-menu">

            </div>


            <div class="div-content">
                <div id='main' style="width:2000px;background-color:lightblue;height:600px">
                    Hello world

                </div>

            </div>

        </div>


     </body>

     </html>

when the div main have actual width that larger than page width , the div-contain is break down to the bottom of div-menu , i want to make that div keep by side of div-menu , and the window horizontal scrollbar will appear ,

how can i achieve

Appreciate any suggest

thank

giftcv · Accepted Answer · 2011-12-05 06:51:05Z

2

Change this line

<div style="margin-top:50px;padding:10px;">

to

<div style="width:2364px; margin-top:50px;padding:10px;">

specify a width equal to the sum of the effective widths of div-menu and div-content

In this case the width should be 2364px

This is calculated by finding the sum of div_width + margin_widths + padding_widths + border_widths

(300+20+20+2)+(2000+20+2)=2364

edited Dec 5, 2011 at 6:51

answered Dec 5, 2011 at 6:41

giftcv

1,66215 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

simpleman Over a year ago

but the div main is dynamic content which we can not predicate the size of, if width of main less than the top-div (width=2400 as you suggest) , the layout will have a unnecessary white space , look confused !

Niranjan Singh · Accepted Answer · 2011-12-05 08:54:05Z

You should maintain width and height of the parent DIV according to content inside it. Check this CSS Box Model to maintain this.

If parent have width 600px then width or height of inner div's should be

Inner Div actual width/height + border width + padding <= 600

So Specify some width to your parent div as per your requirement( 1024px is standard width nowadays) as:

<div style="width:1024px; margin-top:50px;padding:10px;">

then read about the box model and maintain your inner Div width/height.

If there width is not defined then use css overflow and a simple tutorial available here.

for example your content div have not prediction about width/height then use overflow

div
{
overflow:scroll;
}

In CSS3, you can specify in which direction you want to manage: check these
CSS OVERFLOW-X

example:

blockquote { width: 50px; height: 50px; overflow-x: scroll }

<blockquote style=”width: 50px; height: 50px; overflow-x: scroll”>some text</blockquote>

CSS OVERFLOW-Y

Collectives™ on Stack Overflow

CSS Float overflow

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related