Member Avatar for andrewliu

Hello, I was wondering what it is I need to do in order for my width of the div tag to be 1000px; and then it will shrink/resize the width of it if the browser shrinks/resized?


Thank you

  • 4 Contributors
  • 4 Replies
  • 126 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by andrewliu

Dani AI

Generated

As and pointed toward a fluid layout and as noted, JavaScript can help — the simplest, most robust solution is CSS-first, then add JS only for edge cases. For a div that looks like 1000px on wide screens but shrinks cleanly as the browser narrows, use a max-width with a fluid width and a min-width to prevent tables from compressing below a readable size.

.container {
  max-width: 1000px;   /* looks like 1000px on wide screens */
  width: 100%;
  min-width: 720px;    /* adjust so tables don't squeeze */
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 12px;
}

If tables still collide, prefer one of these approaches rather than forcing narrow cells: wrap the table to allow horizontal scrolling, set table-layout: fixed plus word-break to let content wrap, or reflow the table at breakpoints into stacked blocks.

.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; table-layout: auto; }
table.fixed { table-layout: fixed; word-break: break-word; }

When CSS alone can't do the job (rare), use a lightweight JS class toggle on resize instead of setting inline widths. Debounce the handler so it doesn't run constantly. Also ensure images and long strings are responsive (img { max-width:100%; height:auto }), remove deprecated HTML width attributes, and test breakpoints on small devices. These steps give a predictable 1000px look on large viewports while protecting table layout on smaller ones.

Recommended Answers

All 4 Replies

Member Avatar for inplainsite

I would probably use a percentage as your width. That way it will change as you resize the browser.

commented: agreed +1
Member Avatar for Ritesh_4

inplainsite is right, instead of setting width as 1000px, use width="100%" or so to be able to fit to browser's window automatically

Member Avatar for scrappedcola

Not saying that the % width solution won't work it does quite nicely but sometimes you may need a more precise control of your width. For this you could also use javascript:

function changeDivSize()
{
 alert('window.onresize fired');
 /* here you would grab the div and change height/width */
}
window.onresize = changeDivSize;
Member Avatar for andrewliu

oh interesting. i'm not that familiar with javascript. can you please explain some more about it?

Also, how would u do the width so if i do the % it has a minimum width so the tables won't collide or the tables wont squeeze to a thin table.

thanks

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.