Member Avatar for hwoarang69

so here what iam trying to do

-------------------------------------------------------|
|       |                               |              |
|       |                               |              |
|_______|_______________________________|______________|

in html file

<div id="bg">
    <div id = "bg_left">
    </div>
    <div id = "bg_center">
    </div>
    <div id = "bg_right">
    </div>
</div>

i have no idea how to do this.
in css file

#bg_left
{
}
#bg_center
{
}
#bg_right
{

}

note that iam trying so that size doesnt change when i resize the window. also i want control over size of bg_left,....etcc divs

Edited by hwoarang69
  • 2 Contributors
  • 1 Reply
  • 84 Views
  • 27 Minutes Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

— the layout you drew needs explicit widths. is right to point you at assigning widths, but a few small rules will make it work reliably.

Give the outer wrapper a fixed pixel width equal to the sum of the three columns, then give each column a fixed pixel width and place them side-by-side. A common, stable technique is to float the columns (or use inline-block/flexbox) and clear the floats on the wrapper. Use box-sizing: border-box so padding does not inflate the widths and include overflow or a clearfix to contain floated children.

/* example (use your own IDs/classes, not the same names used above) */
#wrapper {
  width: 800px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}
.col-left, .col-center, .col-right {
  float: left;
  box-sizing: border-box;
  height: 200px;
}
.col-left { width: 150px; }
.col-center { width: 500px; }
.col-right { width: 150px; }

Troubleshooting notes: ensure the CSS file is actually linked and not cached, include a valid DOCTYPE to avoid quirks mode, and check computed styles in the browser devtools to find conflicting rules. If you want the center column to take remaining space instead of a fixed width, use flex or calc() on modern browsers. If the viewport becomes narrower than the wrapper you will get a horizontal scrollbar — that is expected for fixed-width layouts.

Member Avatar for JorgeM

Assign a width to each element.

width:##px

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.