html - Fix and flexible width divs next to each other -
I have 3 divs in the header. The width of the sides is fixed, but the center's div fills the remaining width.
It works on large screens, but under 630px, it does not work
HTML CSS I spent hours with it to find this problem, but I do not know what is wrong. My Online Example is available on i jsFiddle
& lt; Div id = "header" & gt; & Lt; Div id = "content" & gt; CENTER & lt; / Div & gt; & Lt; div id = "left" & gt; LEFT & lt; / Div & gt; & Lt; div id = "right" & gt; Right & lt; / Div & gt; & Lt; / Div & gt;
#header {padding: 150px 0 250px; } # Left {status: relative; Swim left; Margin-left: -100%; Background: Red; Width: 250px; Correct: 250px; } #right {status: relative; Swim left; Margin-right: -100%; Width: 150px; Background: pink; } # Content {width: 100%; Background: green; Status: Relative; Swim left; }
# left And
# right have a relative position due to which they move to the next line when the width decreases below 630px.
Comments
Post a Comment