div tag moves when I drag the browser to minimize

[andrewliu]

Hello,

I have a problem with my css styling with div tags. Right now I have 3 div tables and they're aligned next to each other when I do

float:left;position:relative;

but when I drag my browser smaller, the div tags that are in the middle and on the right will go under the first div table. How do i keep it next to each other if I minimize it my browser?

Thank you

[zomex]

Hello,

Can you provide a screenshot of this problem? It's hard to understand exactly what you mean.

Thanks,
Jack

[andrewliu]

I uploaded a screen shot. There's 1 div table in grey boxed, and 2 more div tables next to each other. so thats 3 div tables. so if i drag my browser smaller from the bottom right corner (to minimize the browser), the div tables will move below one another.

The second image shows what I'm talking about.

Thank you for your response

[zomex]

Hello,

You either need to declare a width on your white content area in px or use something called min-width. It looks like your white content box has a % value which means it will change depending on the size of your screen.

Jack

[zomex]

Sorry I was confused by the image border. Try the following on what holds the boxes:

min-width: 100px;

Change 100 to whichever size you need.

Jack

[andrewliu]

Thanks for the response, but it seems like the min-width doesn't work?

[shaya4207]

Sorry I was confused by the image border. Try the following on what holds the boxes:

min-width: 100px;

'min-width' doesn't work in all browsers, what you need to do is put all 3 s in another div and give it a width, that should do it

[andrewliu]

I tried doing that, I don't think that works either :(

[zomex]

Hello,

Do you have a link the page? It will be much easier for us to assist you if we can see it live.

Thanks,
Jack

[andrewliu]

i'm working on localhost, but i can submit my code

<div style="min-width:3px;border:thin solid #000;"> //its weird how whatever min-width i put, it shows the same result, the width extends across the whole browser, and it'll move accordingly as if it was 100%

<div id='sidebarMenu' style='margin-left:0;padding:0;width:230px;float:left;position:relative;background-color:#CCC;'>

<div id='sidebarMenu' style='margin-left:0;padding:0;width:225px;float:left;position:relative;background-color:#CCC;'>


</div></div>


<div id='body'>


<div style="border:thin #CCC solid; width:690px;float:left;position:relative;">
<div style="border:thin #CCC solid; width:680px;float:left;position:relative;">


</div>
</div>


<div style="border:thin #CCC solid;width:260px; bottom:0px;position:relative;float:left;margin-right:90px;">
<div style="border:thin #CCC solid;width:250px; bottom:0px;position:relative;float:left;margin-right:90px;">

</div>
</div>
</div>

I tried putting in the div's in another div like shaya4207 suggested, but its giving me the same effect as if i don't have the duplicate divs.

[andrewliu]

i'm working on localhost, but i can submit my code

<div style="min-width:3px;border:thin solid #000;"> //its weird how whatever min-width i put, it shows the same result, the width extends across the whole browser, and it'll move accordingly as if it was 100%

<div id='sidebarMenu' style='margin-left:0;padding:0;width:230px;float:left;position:relative;background-color:#CCC;'>

<div id='sidebarMenu' style='margin-left:0;padding:0;width:225px;float:left;position:relative;background-color:#CCC;'>


</div></div>


<div id='body'>


<div style="border:thin #CCC solid; width:690px;float:left;position:relative;">
<div style="border:thin #CCC solid; width:680px;float:left;position:relative;">


</div>
</div>


<div style="border:thin #CCC solid;width:260px; bottom:0px;position:relative;float:left;margin-right:90px;">
<div style="border:thin #CCC solid;width:250px; bottom:0px;position:relative;float:left;margin-right:90px;">

</div>
</div>
</div>

I tried putting in the div's in another div like shaya4207 suggested, but its giving me the same effect as if i don't have the duplicate divs.