Float and auto width problem CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-02 09:47 出处：网络

My code is <body> <div cla开发者_如何学运维ss=\"main> <div class=\"left\">blah blah </div>

My code is

<body>
   <div cla开发者_如何学运维ss="main>
      <div class="left">blah blah </div>
      <div class="right">blah blah </div>
      <div style="clear:both"></div>
   </div>
</body>

CSS part:

.main{min-width:1000px}
.left{width:400px ; height:auto ; float:left }
.right{width:auto ; height:auto ;float:left }

I am dynamically inserting data into 'right' div and when its width exceeds 600px , it comes down the left div. But instead of that I want a horizontal scrollbar to view the content. One solution may be, removing "float:left" from right div. But still it causes problem.

I suggest you to use "word-wrap" css property. See here. But if you still want to keep your way, you can use max-width: 600px; and overflow: auto; css properties for your right div. I assume it will work.

Hmm it does not make sense the layout you just presented for a number of reasons but it's your site so you probably have your reasons . But given this context all you have to do is :

A fluid layout is always better , even if you're using a fixed div as a wrapper .

.left{
width:40% ; 
float:left ; 
}

.right{ 
width:60% ;
overflow : scroll ;
}

But you should be more precise , i don't clearly get what are you trying to achieve but this will probably solve your problem . And remember if you use fluid widths margins,padding and borders can mess your layout . But that's another story .

EDIT:
See i didn't understood the first time what were trying to achieve , you probably were looking for : " The padding with the negative margin trick " to get everything to the same height :

 .main{overflow:hidden}
 .left{
    width:40% ; 
    float:left ; 
    padding-bottom : 1000px ; 
    margin-bottom : -1000px;
    }

    .right{ 
    width:60% ;
    float:left ;
    padding-bottom : 1000px ; 
    margin-bottom : -1000px; 
    }