Member Avatar for LogicWeb

Trying to set 2 columns using css/div. I want the mp3 player on left column at 375px and chat room on right column at 100% width (fluid), both at 600px height.

I'm using this code:

<style>
#containerchat {
  width: 100%;
  margin-left: auto ;
  margin-right: auto ;
  height: 600px;
}
#contentchat {
  margin-left:  20px;
  float: right;
  width: 100%;
  height: 600px;
}
#navbarchat {
  float: left;
  width: 375px;
}
#footerchat {
    clear: both ;
}
</style>

<div id="containerchat">
  <div id="navbarchat">
        <iframe src="" width="375" height="600" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe> 
  </div>
  <div id="contentchat">
        <!-- FOR 123FLASHCHAT CODE BEGIN --> 
        <script language="javascript" src=""></script> 
        <script language="javascript"> 
        openSWF("", "100%", "600" ); 
        </script> 
        <!-- FOR 123FLASHCHAT CODE END -->  
  </div>
  <div id="footerchat">Bottom Footer</div>
</div>

This is how it appears

Edited by LogicWeb
  • 2 Contributors
  • 3 Replies
  • 126 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

OP wanted two 600px-high columns: a fixed 375px mp3 column on the left and a fluid chat column on the right. The layout broke because the right column was given a full 100% width while the left column also occupied fixed space. Floats and block widths must fit together inside the same container; if the combined widths exceed the container, one column drops below the other.

As demonstrated, the simple fix is to give the left column a fixed width and let the right column fill the remaining space instead of forcing width:100%. For a more robust, modern approach consider using Flexbox or Grid so the right column naturally takes available space and both elements stay the same height.

A compact Flexbox pattern:

#containerchat {
  display: flex;
  height: 600px;
}

#navbarchat {
  flex: 0 0 375px;
}

#contentchat {
  flex: 1 1 auto;
  min-width: 0; /* prevents overflowing children from breaking the layout */
}

Or a Grid alternative:

#containerchat {
  display: grid;
  grid-template-columns: 375px 1fr;
  height: 600px;
}

Quick troubleshooting checklist:

  • Inspect computed widths in DevTools to see which element is overflowing.
  • For Flexbox, add min-width:0 to the flexible column to avoid overflow from iframes or long content.
  • Use box-sizing: border-box so padding does not expand widths unintentionally.
  • Make iframes and embeds display: block; width: 100%; height: 100% so they scale to their parent.
  • Prefer clearing the floats via a clearfix on the container rather than placing a separate cleared footer element.

Credits: for the original layout goal and for the effective float-based fix.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Try this code. Note, I just added the black background to the ContentChat div just so I could see the divs line up side by side. This code should work across modern browsers.

<style type="text/css">
#containerchat {
  width: 100%;
  margin-left: auto ;
  margin-right: auto ;
  height: 600px;
}
#navbarchat {
  width: 375px;
  float:left;
}

#contentchat {
  margin-left:  20px;
  height: 600px;
  background-color:Black;
  overflow:hidden;
}

#footerchat {
    clear: both ;
}
</style>
Member Avatar for LogicWeb

That worked, thanks!

Member Avatar for JorgeM

Awesome!

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.