I am having great difficulties with achieving this look on my page: The layout
Basicaly I want a couple of rows on the left with content in divs that have a boxy-design like this.
Then on the right I want three divs that look like on the picture. When you start scrolling down then the right-div-"group" should follow down with the scroll.
*Please note that the right-divs have a DIFFERENT size from the left hand divs.
*Please note that all of this should be inside a class="container" to be not full width.
I have tried placing cols in cols ets, and the affix for the righthand div "boxes" but it simply all breaks when I scroll or simply resize the page...
Upon request, here is the code I have so-far. (I only include body)
HTML - This generates a quite accurate rendition of the page. However, when the affix is turned the righthandpanel suddenly "gets bigger". Also on small devices the bottom of the righthand panel is not visible as it crashes into the footer. (Depends on window size)
I have tried making it so that the rightpanel ends up below the "left-side content boxes" when the device is small enough. Even though it does not work perfectly.
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="pbcontainer">
PBCONTAINER:
<div class="pbcontent">
<div class="caption">
<h3>Dimensioner</h3>
<form>
<div class="form-group">
<p>Bredd & Höjd</p>
<div class="input-group">
<input type="text" class="form-control" id="bredd" placeholder="Ange bredd i mm">
<input type="text" class="form-control" id="höjd" placeholder="Ange höjd i mm">
<span class="input-group-addon" id="basic-addon2">mm</span>
</div>
</div>
</div>
</div>
<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Bredd för stor! - <a href="#">Varför?</a></div>
<div class="alert alert-warning" role="alert"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Motortypen du har valt orkar inte bära en såhär bredd rullgardin, vill du vi skall välja rätt åt dig? - <a href="#">Ja Tack!</a></div>
<div class="pbcontent">
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
</div>
</div>
<!-- Rightside panel -->
<div class="col-md-3">
<div class="pbcontainer" data-spy="affix" data-offset-top="150" >
PBCONTAINER:
<div class="pbcontent">
<div class="caption">
<h3>Pris: 549kr</h3>
<p><b>Varav Tillval:</b>129kr</p>
<p>- Fjärrkontroll: 50kr</p>
<p>- Extra List: 25kr
<p><b>Slutpris </b>549kr</p>
<a href="#" class="btn btn-default" role="button">Rensa Konfiguration</a>
</div>
</div>
<div class="pbcontent">
<div class="caption">
<h3>Konfiguration</h3>
<p><b>Rullgardin: </b>2500mm x 1000mm</p>
<p><b>Tyg: </b>Carina Yellowgreen 40570-6979</p>
<p><b>Färg:</b>Grön</p>
<p><b>Egenskaper:</b>Translucent 30% (Genomskilnig)</p>
<a href="#" class="btn btn-default" role="button">Rensa Konfiguration</a>
</div>
</div>
<div class="pbcontent">
<div class="caption">
<h3>Frakt</h3>
<div class="form-group">
<p>Ange Postnummer</p>
<div class="input-group">
<input type="text" class="form-control" id="postalnumber" placeholder="Ex: 220 53">
</div>
</div>
<p><a href="#" class="btn btn-primary" role="button">Lägg till i kundkorg</a>
</div>
</div>
</div>
</div>
</div>
</div>
The interesting CSS here is
@media (max-width: 990px){
.affix { /* change sidenav selector to match your layout */
position: static; /* removes the affix behaviour */
width: auto; /* customise as required */
top: 0; /* customise as required */
}
}
and
.pbcontent {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
/* background-color: #fff;*/
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
word-wrap: break-word
}
.pbcontent > img,
.pbcontenta > img {
margin-right: auto;
margin-left: auto;
}
a.pbcontent:hover,
a.pbcontent:focus,
a.pbcontent.active {
border-color: #337ab7;
}
.pbcontent .caption {
padding: 9px;
/* color: #333; */
}
.pbcontainer {
display: block;
margin-bottom: 20px;
line-height: 1.42857143;
/* background-color: #fff;*/
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
This results in something like this, I cannot add more than 2 images unfortunately.
