CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
ccc
ccc

Reputation: 467

Trouble stopping a div from dropping down while resizing window

I've tried fixing this myself for awhile now, it seems like an easy problem but I'm lost.

I have two divs one with float left, one with float right. The right one has a margin-left of 40px and the width needs to adjust as the window gets smaller. At the moment once the two divs touch it is dropping down.

Please check this to further understand :) https://jsfiddle.net/to7g54sn/1/

#contentwrapper {
width: 100%;
max-width: 1160px;
float: right;
margin-top: 154px;
margin-left: 40px;
}

#navigation {
width: 150px;
margin-left: -120px;
float: left;
}

(The preview needs a width of 1330px to see the divs before they drop).

The margin-left: 40px on the right div needs to constantly be applied, if you scroll down on the resized window you will see the left div overlaps. I think the javascript is making this issue tough but I'm not entirely sure.

Upvotes: 1

Views: 93

Answers (1)

Sarower Jahan
Sarower Jahan

Reputation: 1495

I have a easy solution. Just use this css below: 

#contentwrapper {
    width: calc(100% - 70px);
}

Check this on jsfiddle

Upvotes: 1

Related Questions