We're a community of 1076K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,075,557 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion

can't get 2 column divs side by side

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="http://files.podsnack.com/iframe/embed.html?hash=azu8rl5n&wmode=transparent&t=1334750620" 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="http://xxx:35555/123flashchat.js"></script> 
        <script language="javascript"> 
        openSWF("http://xxx:35555/123flashchat.swf?init_host=xxx&init_host_s=xxx&init_host_h=xxx&init_room=1", "100%", "600" ); 
        </script> 
        <!-- FOR 123FLASHCHAT CODE END -->  
  </div>
  <div id="footerchat">Bottom Footer</div>
</div>

This is how it appears

http://s14.postimage.org/5ezfyng9t/chat.png

2
Contributors
3
Replies
3 Days
Discussion Span
11 Months Ago
Last Updated
4
Views
Question
Answered
LogicWeb
Junior Poster
100 posts since Jan 2008
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0

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>
JorgeM
Senior Poster
3,996 posts since Dec 2011
Reputation Points: 294
Solved Threads: 543
Skill Endorsements: 115

That worked, thanks!

LogicWeb
Junior Poster
100 posts since Jan 2008
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0

Awesome!

JorgeM
Senior Poster
3,996 posts since Dec 2011
Reputation Points: 294
Solved Threads: 543
Skill Endorsements: 115
Question Answered as of 11 Months Ago by JorgeM

This question has already been solved: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
 
© 2013 DaniWeb® LLC
Page rendered in 0.1025 seconds using 2.95MB