Member Avatar for 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

  • 3 Contributors
  • 10 Replies
  • 380 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by andrewliu

Dani AI

Generated

Floats will drop to the next line whenever the combined outer widths (width + padding + border + margin) of the boxes exceed the available space. In the posted markup there are a couple of telltale problems that can hide the real cause: duplicate id attributes, stray inline comment text inside the HTML, and floated children whose parent never contains them. Those issues make min-width or a wrapper look like they "don't work" because the browser is computing sizes against broken/implicit layout rules.

A modern, reliable fix is to stop relying on floats and use a flex container. That keeps the three panels on one line and lets the container provide horizontal scrolling when the viewport gets too small:

.row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: nowrap;     /* keeps items on one line */
  overflow-x: auto;      /* allows horizontal scroll instead of wrapping */
  box-sizing: border-box;
}
.col {
  flex: 0 0 220px;       /* give each box a fixed basis or use percentages */
  box-sizing: border-box;
}

If legacy-browser support is required, the inline-block + no-wrap pattern is an alternative:

  • Set the wrapper to white-space: nowrap; overflow-x: auto;
  • Make children display: inline-block; vertical-align: top; and set their widths.

If keeping floats, ensure the wrapper actually contains them (use a clearfix). Example clearfix:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Checklist to resolve the original symptoms (ties to earlier suggestions by and ): remove invalid HTML (duplicate ids, stray comments), inspect computed widths in DevTools to confirm totals, apply box-sizing: border-box to simplify math, and either switch to flexbox or ensure the wrapper clears floats so min-width or a fixed wrapper width can behave as expected.

Recommended Answers

All 10 Replies

Member Avatar for zomex

Hello,

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

Thanks,
Jack

Member Avatar for 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

Untitled.png 11.37 KB Untitled2.png 6.81 KB
Member Avatar for 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

Member Avatar for 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

Member Avatar for andrewliu

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

Member Avatar for 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 <div>s in another div and give it a width, that should do it

Member Avatar for andrewliu

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

Member Avatar for 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

Member Avatar for 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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.