4 replies [Last post]
blopa
blopa's picture
Offline
newbie
Last seen: 6 years 11 weeks ago
Timezone: GMT+2
Joined: 2013-08-26
Posts: 3
Points: 6

Hello, first of all thanks for any help.

I have three mains divs... content, sidebar, and footer. The content has auto height ( with about 1200px) and asigned width (860px). The sidebar wich is in the right, has an asigned height (130px) and i want that the width goes to the end of browser, because it has a different background color, it has asigned a float left property, because i want that when i shrink the browser, the sidebar places down of the content and over the footer.
if i give the sidebar a width 100%, it jumps automatically down the content, without resizing the browser, and i need it to be 100% width because as i sed, it has a different background color and want it to go to the end of the browser.

the html:

<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>

the css:

#content {
    float: left;
    width: 860px;
}
#sidebar {
    background-color: #FE3236;
    float: left;
    overflow: hidden;
}
#footer {
    clear: both;
    width: 100%;
}

everything is inside a wrapper with width 100%
i hope that what i need is possible with just css code.
i have search the web but did not find any solution with plain css.

thanks for any help

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 15 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Faux columns

Take a look at Faux columns. It's an old method, but still one of the most robust.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

blopa
blopa's picture
Offline
newbie
Last seen: 6 years 11 weeks ago
Timezone: GMT+2
Joined: 2013-08-26
Posts: 3
Points: 6

Thanks for the answer but is

Thanks for the answer but is not what i was looking for... i´ll try to explain my self better.

sidebarbehavior.jpg

So de sidebar has width auto, but won´t fill to the end, so if i give it width 100% jumps under the content, wich is something i want it to do, but just when i shrink the browser size( with this i mean that the sidebar has to have float left property)

i hope now i have explain my sel clear
thanls for any help Big smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 15 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Don't float the sidebar

Creating a new block formatting context will do the deed. Note this test case:

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test Doc</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    background-color: white;
    color: black;
    font: 100%/1.5 sans-serif;
    margin: 0;
    }
 
  p {
    font-size: 1em;
    }
 
  h1 {
    padding: 0 1.5rem;
    text-align: center;
    }
 
  hr {
    display: none;
    }
 
  #wrapper {
    border: 1px solid black;
    margin: 0 auto;
    max-width: 75em;
    min-width: 30em;
    }
 
  #content {
    overflow: hidden;  /*causes element to enclose its floats*/
    }
 
  #main {
    background-color: pink;
    color: black;
    float: left;
    min-width: 25em;
    padding: 0 1.5em;
    width: 60%;
    }
 
  #sidebar {
    background-color: red;
    color: black;
    min-width: 13rem;
    overflow: hidden;    /*creates new block formatting contenxt*/
    padding: 0 1.5rem;
    }
 
  #footer {
    background-color: orange;
    color: black;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="wrapper">
    <h1>Top level page heading</h1>
 
    <div id="content">
      <div id="main">
        <h2>Top level sub-heading for this section</h2>
 
        <h3>Topic heading</h3>
 
        <p>Etiam non rhoncus neque. Suspendisse et dignissim nulla, ut eleifend
        odio. Lorem ipsum dolor sit.</p>
        <hr>
 
        <h3>Topic heading</h3>
 
        <p>Etiam non rhoncus neque. Suspendisse et dignissim nulla, ut eleifend
        odio. Lorem ipsum dolor sit.</p>
        <hr>
      </div><!-- end main column -->
 
      <div id="sidebar">
        <h2>Top level sub-heading for this section</h2>
 
        <p>Etiam non rhoncus neque. Suspendisse et dignissim nulla, ut eleifend
        odio. Lorem ipsum dolor sit.</p>
        <hr>
      </div><!-- end sidebar -->
    </div><!-- end content -->
 
    <p id="footer">footer stuff</p>
  </div><!-- end wrapper -->
</body>
</html>
Study the code, then come back with your questions. That'll save me answering stuff you already know.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

blopa
blopa's picture
Offline
newbie
Last seen: 6 years 11 weeks ago
Timezone: GMT+2
Joined: 2013-08-26
Posts: 3
Points: 6

works perfect

Thank you so much Gary, i was so obsess with making the sidebar works for my purpose that never would have thought about this.
Again thank you very much!!!