CODEWITHSUNDEEP
csshtml
kaushik
kaushik

Reputation:

Div sections shifts when i resize the window

I have placed 2 divs side by side, one conatins the logo and second contains the text fields. When I view this page at larger resolution, everything is ok. But, when I resize the window, the second div also gets shited and comes below the 1st div.

But I want them to stay there side by side, at any resolution. kindly provide the code solution for this.

Upvotes: 0

Views: 7343

Answers (5)

user3515900
user3515900

Reputation: 29

Is just that your 10px(margin-left + margin-right) are more then 1%. This should work:

#Content {
width: 100%; 
height: auto; 
margin-top: 26px; 
float: left;
}

#ContentLeft {
margin-left: 1%; 
float: left; 
width: 19%;
}

#ContentMain {
width: 79%; 
margin-right: 1%; 
float: right;
}

Upvotes: 0

Prasadh
Prasadh

Reputation: 1

I tried keeping the total of widths 1% less (1% unused) from the total of both divs.... seems to work for me :) Myabe it is useful to someone.

CSS:

#Content {
width: 100%; 
height: auto; 
margin-top: 26px; 
float: left;

}
#ContentLeft {
margin-left: 5px; 
float: left; 
width: 19%;
}

#ContentMain {
width: 80%; 
margin-right: 5px; 
float: right;
}

HTML:

<html>
<body>
<div id="Content">
<div id="ContentLeft">Left menu</div>
<div id="ContentMain">Here goes the bigger content</div>
</div>
</body>
</html>

Upvotes: 0

Michal M
Michal M

Reputation: 9480

I guess you use float to position them next to each other. You can wrap around the two divs with another div of a minimum width you want the page to be viewed in. that will stop the second one from dropping below the first one

<div id="wrapper">
    <div id="logo">...</div>
    <div id="text">...</div>
</div>

style for it would be:

#wrapper { width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { width: 780px; }

something like that. if someone resizes the window to be narrower than 980px (or uses lower screen res) then you'll get horizontal scroll.

//edit in response to comment you can use min-width to make it more flexible. will cause IE

#wrapper { min-width: 980px; }
#wrapper div { float: left; }
#logo { width: 200px; }
#text { min-width: 780px; }

min-width isn't supported by IE6 so you may need fix for that.

Upvotes: 4

jrharshath
jrharshath

Reputation: 26583

the second div slides below the first one because there is not enough width in the container to allow both of them to be placed side by side.

This can be remedied in two ways:

  1. change the "overflow" property of the container node to "hidden" (or even overflow).
  2. Set the "min-width" of the container. This approach however, is afflicted by special hacks required for IE. Also, a min-width approach usually cannot be done abruptly. It has to be planned from the start of page design.

Hope that helps.

cheers!

Upvotes: 0

SpliFF
SpliFF

Reputation: 38956

basically the second div needs somewhere to go if it won't fit. In your case the only option is to crop so wrap the line in a div with overflow:hidden.

Upvotes: 0

Related Questions