CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Frank
Frank

Reputation: 189

Issue in width of the container

I have a fixed header and right aside of 260px. I have three columns with height 100%.The content area to be a fluid-container that is 12 column wide.

<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
    <div class="row">
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
    </div>
</div>

Below is the fiddle i am working on. The width of the cols are breaking with the layout.

http://codepen.io/anon/pen/qxusJ

Upvotes: 0

Views: 78

Answers (3)

Smokey
Smokey

Reputation: 1897

I don't understand why you use so much of custom styles in BS. Check the responsiveness of the page in http://www.responsinator.com/

Check this out.

<html>
<head>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style>
    .secondary-aside {
        width: 25%;
        float: right;
        background: #000000;
        height: 100%;
    }
</style>

</head>
<body>
<div class="container-fluid">
<div class="header">i am the header</div>
<div class="secondary-aside col-sm-4">ff</div>
<div class="col-sm-8">
        <div class="col-sm-4" style="background-color: red">r</div>
        <div class="col-sm-4"style="background-color: green">g</div>
        <div class="col-sm-4"style="background-color: blue">b</div>
</div>
</div>
</body>
</html>

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15871

Not really clear what you mean by The width of the cols are breaking with the layout.

Try it this way :

html, body, .container {
    height:100%;
    width:100%; /*keep html and body 100% */
    margin:0;
    background:lightgray
}
.container {
    display:table;
    width:calc(100% - 260px);/*keep container 100% - 260px */
    border-spacing:0.5em;
}

Upvotes: 1

imcconnell
imcconnell

Reputation: 844

I don't quite understand; you want the container to be fluid, but then you have columns within it that have a fixed width?

How you could do it is: 

<div class="header"></div>
<div class="container">
    <div class="secondary-aside"></div>
    <div class="content">
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
    </div>
</div>

With the following CSS: 

html, body { 
    height: 100%;  
}

.header { 
    height: 60px;
  background: blue;
  width: 100%;
}

.container { 
    overflow: auto; 
  height: 100%; 
}

.secondary-aside { 
    width: 25%;
  float: right; 
    background: red; 
  height: 100%; 
}

.content { 
    width: 75%;
  float: left;
  background: #777;
  overflow: auto;
    height: 100%;
}

.col-sm-4 { 
    height: 100%;
  background: yellow;
  width: 33.3333%;
  float: left;
}

Would that help?

Upvotes: 1

Related Questions