• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 280
  • Last Modified:

Two panels with widths

I have a sidebar panel which I want to be 200 pixels wide.
And to the right of it is a content panel, which I want to fill up the remainder of the screen width. So it can vary depending on the width of the browser and resolution.

How do I create the CSS for this?

 
.LeftSidebarPanel
{
    width: 200px;
}
.ContentPanel
{
    width: 100%;
}

Open in new window


Thanks!
0
Starr Duskk
Asked:
Starr Duskk
  • 12
  • 11
1 Solution
 
jonahzonaCommented:
It would be something like this:

#main {
  width: 100%;
  height: 100%;
  float: left;
  margin: 0 !important;
  padding: 0 !important;
}

#sidebar {
  width: 200px;
  height: 100%;
  float: left;
}

#content {
  width: auto;
  height: 100%;
  float: left;
}

Open in new window


Your markup would be:

<div id="main">
  <div id="sidebar">
    SIDEBAR CONTENT
  </div>
  <div id="content">
    CONTENT
  </div>
</div>

Open in new window


Remember also that your body will have default padding. Be sure to add this to your css

body {
  margin: 0 !important;
  padding: 0 !important;
}

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Did you check this? Because the content is falling below the sidebar on a new line, not side by side.
0
 
jonahzonaCommented:
Yeah I did. I will recheck.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jonahzonaCommented:
I see what you are saying. Once the content gets all the way across, it falls below. I will redo the CSS.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
nevermind. I had another content style in my sheet already. Still working on it. :)
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Oh, yeah. If that's happening, please let me know the fix for that. I'm not that far along yet.:) Thanks!
0
 
jonahzonaCommented:
I got it.

Remove the float: left; from the content div.

You should be fine after that.
0
 
jonahzonaCommented:
Here is a rough markup.

<html>
<head>
<style>
#main {
  width: auto;
  height: auto;
  float: left;
  margin: 0 !important;
  padding: 0 !important;
}

#sidebar {
  width: 200px;
  height: 100%;
  float: left;
}

#content {
  width: auto;
  height: 100%;
  float: left;
}
</style>
</head>
<body>
<div id="main">
  <div id="sidebar">
    SIDEBAR CONTENT
  </div>
  <div id="content">
    CONTENT ADSF IS S DIAN DI ADSF  OADF ODS OASD FODAS OOSAD OF OFASOD 

FOADS FOSDA FOADS FOASDF AD  ASDFKASDFASDF:LASDFKALSD FKADSFKLDSFAKSDF

  </div>
</div>

</body>
</html>

Open in new window

0
 
jonahzonaCommented:
Sorry! Left the float in there.

<html>
<head>
<style>
#main {
  width: auto;
  height: auto;
  float: left;
  margin: 0 !important;
  padding: 0 !important;
}

#sidebar {
  width: 200px;
  height: 100%;
  float: left;
}

#content {
  width: auto;
  height: 100%;
}
</style>
</head>
<body>
<div id="main">
  <div id="sidebar">
    SIDEBAR CONTENT
  </div>
  <div id="content">
    CONTENT ADSF IS S DIAN DI ADSF  OADF ODS OASD FODAS OOSAD OF OFASOD 

FOADS FOSDA FOADS FOASDF AD  ASDFKASDFASDF:LASDFKALSD FKADSFKLDSFAKSDF

  </div>
</div>

</body>
</html>

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
hmmmm. it does the left block. then the right block, it does one headline, then everything else falls below it. I'll have to see what else is going on.
0
 
jonahzonaCommented:
Make sure you use the second one. The first one still had the float in it.

Just tested it in FF and IE. Works as desired.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I have this:
 
#main {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#sidebar {
  width: 200px;
  height: 100%;
  float: left;
}

#content2 {
  width: auto;
  height: 100%;
}

Open in new window


and the first line displays next to the sidebar on the right. But each additional line falls below on the left. It doesn't stay in its panel. Do I need something like box inline?
0
 
jonahzonaCommented:
No, but did you change your <div id="content"> to <div id="content2">? Your CSS is calling it content2.

Here are the screen shots with maximized and restored.

 Maximized Restored
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Here is my code:
 
<div id="main">
  <div id="sidebar">
    SIDEBAR CONTENT
  </div>
  <div id="content2">
    CONTENT<br />
    Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. 
    Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. 
    Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. 
    Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. 
    Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. 
    Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. Now is the time. 
    <br />
  </div>
</div>

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
css
0
 
jonahzonaCommented:
Is this what you are seeing? Because it seems like this is what you are asking for....

 SS
0
 
jonahzonaCommented:
How are you attaching your CSS? I was able to recreate what you had by removing the styling for the content section. I think you are missing something somewhere.

Download this page and view it in your browser. Tell me if it works or not. help16.html
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
hold on. may be missing float left in main.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
yes, yours works. Mine doesn't. But my styles on in a THEMES asp.net directory. I need to figure out what is breaking it. Sigh.
0
 
jonahzonaCommented:
From what I can tell, it has to do with the height attribute for  the content2 div.

Make sure you don't have any errors in your code or markup.
0
 
jonahzonaCommented:
Any luck?
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Yes, I figured out that the Telerik controls were not playing well with this form of style. So I used the .NET Panel to wrap them and it works fine.
Thanks!

(got more questions coming up!)
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
thanks!
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 12
  • 11
Tackle projects and never again get stuck behind a technical roadblock.
Join Now