CODEWITHSUNDEEP
cssresponsive-designwidthsidebar
Daniel
Daniel

Reputation: 1555

Sidebar width issue

I start with showing you my "site".

My Problem "My problem"

The header will always be centered with a width of 1140px.
The main content will have width of ~70% and a max width of 912px.

My problem is that the sidebar won't keep it's correct width.

If you look at the site in the "design" resolution, it looks right but if you make the window bigger, it doesn't follow. It should always stay so the sidebar content always is "inside" the the left edge of the header.

How would I achive this?
The sidebar have a width of ~23% and it looks right if you keep the window at 1300px wide (that's the width the design came in).

Upvotes: 0

Views: 853

Answers (1)

Paulie_D
Paulie_D

Reputation: 115299

Based on your stated requirements, the header will have a min-width of 1140px so my 'solution' is based on that figure. For full responsiveness this should really be a % and media queries used.

By using a couple of extra wrappers I think we can mange what you are after.

** BASIC HTML **

<header>
  <div class="inner">
    THIS IS MY HEADER AREA
  </div>
</header>

<div class="nav">
  <div class="inner">
  THIS IS MY NAV BAR
</div>
</div>

  <aside>
    ASIDE
  </aside> 

<div class="inner clearfix">

  <div class="content">
    CONTENT
  </div>
</div>

** CSS ** (including some colors so you can see ahat is happening.

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

html {
  text-align:center;
  font-weight: bold;
}

header {
  height:50px;
  line-height:50px;
  background:lightgreen;
}

.inner {
  width:1140px;
  margin:0 auto;
  position:relative;
  }

header .inner {
    background:lightblue;
}

.nav {
  height:50px;
  background:pink;
  line-height:50px;
}

.nav .inner {
  background:NavajoWhite;
}



aside {
  width:20%;
  min-width:218px;
  height:400px;
  background:blue;
  margin-top:10px;
  position:absolute;
  left:10px;

}

.content{
  height:450px;
  background-color: orange;
  width:70%;
  float:right;
  max-width:912px;
  margin-top:10px;
}

Codepen Example

Upvotes: 0

Related Questions