CODEWITHSUNDEEP
htmlcss
simpleman
simpleman

Reputation: 148

CSS Float overflow

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

Upvotes: 0

Views: 902

Answers (2)

Niranjan Singh
Niranjan Singh

Reputation: 18290

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

Upvotes: 0

giftcv
giftcv

Reputation: 1662

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

Upvotes: 2

Related Questions