CODEWITHSUNDEEP
css
ComeRun
ComeRun

Reputation: 921

css two div beside eachother without overlap on windows resize

The following is my html and css code

<body>
<div style="display: inline; postion: relative; float: left; width: 20%; min-height: 350px; background-color:red">
TESSSSSSSSSTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT123
</div>
<div style="display: inline; postion: relative; float: left; width:80%; min-height: 350px; background-color:green">

</div>

</body>
</html>

On windows resize, two div overlaps, is there any way to avoid this? I want two divs to always stay in one line no matter what window size (also both divs contents gets wrapped inside each div).

appreciate any help, thanks,

Upvotes: 2

Views: 5108

Answers (4)

Adrift
Adrift

Reputation: 59799

Their widths are defined using the % value, thus they grow/shrink relative to the browser size. For your text to not overlap in the neighboring <div> add word-break: break-all; to your first <div> that contains the text .. also please mention which browser you are using.

Example

Upvotes: 2

jhunlio
jhunlio

Reputation: 2660

html

<div class="firstDiv"></div>
<div class="secondDiv"></div>

css

.firstDiv {
    height:100px;
    width:60%;
    float:left;
    background-color:#222;
}
.secondDiv {
    height:100px;
    width:60%;
    float:left;
    background-color:#000;
}

use percentage % to make your div more fixeble DEMO

Upvotes: 0

mufasa
mufasa

Reputation: 1344

The divs are not overlaping, your test text is simply without spaces, and the browser will only re-size text on spaces. Try adding spaces to the test text and you will see that the text will re-size (by now, you should also see that the divs actually do not overlap).

Also, if you set the elements to inline, there is really no point in having the elements floating left as you have done. If you are planning on useing the divs as a part of a website layout, I would suggest keeping them floating left which will keep the divs as block-elements, which is a allows more styling with CSS.

Upvotes: 0

martriay
martriay

Reputation: 5742

They don't overlap, their widths change according to <body>, they stay in the same line one next to the other.

Upvotes: 0

Related Questions