I'm making a website using Bootstrap and Wordpress. It's a 2-column layout - left sidebar, right content. The right content is dynamic and expands by infinite scroll. I've tried to make the left sidebar 100% height through several techniques but to no avail.
I'd like the sidebar to continue down according to the size of the viewport/height of the right content div.
I've made a bare fiddle: http://jsfiddle.net/ydPMr/3 but it would be better if you saw what I was talking about on my dev page: http://joshuawalker.koding.com.
Here is the basic structure of my page:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"></div>
</div>
<div class="wire-unit hero-fix">
</div>
<div class="sidebar hidden-phone"></div>
<div class="content"></div>
If anyone has any ideas on how to make the sidebar to stretch full height, I would appreciate it.
Thanks!
This is working fine for me. Fiddle
I set the min-Height to 500px. If you don't want minimum, remove it. It will work according to the height of your content in the content div. Like this Fiddle
<div class="wrapper">
<div class="sidebar hidden-phone">
</div>
<div class="content">
</div>
</div>
and style
<style type="text/css" >
.wrapper
{
min-height:100%;
width:100%;
position:relative;
background-color:Black;
display:inline-block;
}
.sidebar
{
width:20%;
top:0px;
left:0px;
bottom:0px;
position:absolute;
background-color:Aqua;
}
.content
{
min-height:500px;
width:80%;
position:relative;
background-color:Gray;
float:right;
}
</style>
Related
Being more of a backend developer, I'm finding myself having some trouble with the header I'm working on (HTML/CSS only). Fiddle: http://jsfiddle.net/yoom1jvw/
.container{
margin:0 auto;
text-align:left;
height:auto;
width:95%;
min-width:1000px;
max-width:2000px;
background-color:white;
}
As you can see the min-width of the container in 1000px before it stops responding to the change
My issue: The yellow box keeps collapsing under the grey box, and the grey box collapses under the green when responding to the width of the browser.
My Goal: Instead of the boxes collapsing under one another, I want the header to start removing the spaces in-between the boxes and also the search bar to slowly get smaller.
The search bar does respond a little, but I can't seem to figure out how to get the margins between the boxes to do the same. If anyone could point me in the right direction I'd really appreciate it!
NOTE: You will have to expand the fiddle quite a bit since we are dealing with wide resolutions.
Thanks!
short calculation with min-widths:
container= 1000px;
_________________________________
logo: 200px
search: 20% of container = 200px
btn-main: 200px
main-nav: 400px
login-box: 100px
---------------------------------
1100px + space between boxes
Your main problem is that you can't arrange about 1150px in a 1000px container ;)
Solution
If you can change some of the boxes widths to fit into the container. You could make the container "position: relative" so you're able to place your boxes in absolute positioning (in percentage) without the margin-left. For example if the width of main-nav would be 250px - http://jsfiddle.net/yoom1jvw/2/
I'm not too sure what you wanted.
However, I am sure you can change this to suit your needs
<!DOCTYPE html>
<html>
<head>
<style>
#header{
margin:0px auto;
width:95%;
height:80px;
background-color:blue}
.container{
display:block;
float:left}
.block{
display:block;
margin:0px auto;/*all blocks are centered in their container*/
max-width:100%}/*so a block can be greater than its container*/
#container1{width:20%}/*all the percentage must add up to 100%*/
#container2{width:20%}/*these are the widths of all the containers in %*/
#container3{width:10%}/*container3 is smaller than container4 by 20%*/
#container4{width:30%}
#container5{width:20%}
#block1{
background-color:black;
width:200px;
height:60px;}
#block2{
background-color:white;
width:300px;
height:50px}
#block3{
background-color:green;
width:100px;
height:70px}
#block4{
background-color:grey;
width:400px;
height:60px}
#block5{
background-color:yellow;
width:200px;
height:50px}
</style>
</head>
<body>
<div id="header">
<div id="container1" class="container"><!--container for block-->
<div id="block1" class="block"></div><!--Actual Block-->
</div>
<div id="container2" class="container">
<div id="block2" class="block"></div>
</div>
<div id="container3" class="container">
<div id="block3" class="block"></div>
</div>
<div id="container4" class="container">
<div id="block4" class="block"></div>
</div>
<div id="container5" class="container">
<div id="block5" class="block"></div>
</div>
</div>
</body>
</html>
Note: all containers could be the same % width, therefore you would not need all the extra ids
just make sure they add up to 100%
here is it live http://jsfiddle.net/6wpoecg3/
I am trying to create 4 div sections (side-by-side) that expand across the width of the screen. I am using jQuery UI's resizable() feature to make a div wider or narrower. The problem is that if I make the "blue" div larger then it pushes the "green" div away. I want all four divs to always be visible and the green to not be pushed out.
Actually...just how jsBin is setup. Try resizing the "javascript" area all the way to the right - notice the "Output" does not leave the area. How do I go about achieving this?
see jsBin --> http://jsbin.com/tejahili/1/edit?html,css,js,output
HTML
<div id='wrapper'>
<div id='yellow' class='box'></div>
<div id='red' class='box'></div>
<div id='blue' class='box'></div>
<iframe id='green' class='box'></iframe>
</div>
CSS
#wrapper {
width:100%;
position:fixed;
left:0;
top:0;
bottom:0;
}
.box {
display:inline-block;
width:24%;
margin:0;
height:100%;
padding:0;
}
I'm trying to make the left column static and the contentwrapper responsive to browser resizing. I do not want to use floats because when I do not want it to shift the content down.
HTML
<div id="maincontainer">
<div id="leftcolumn">
</div>
<div id="contentwrapper">
</div>
</div>
As far as I have understood from your question I think you need something like this:
http://jsfiddle.net/v5FZv/1/
CSS
#maincontainer{
display:table;
width:100%;
}
#leftcolumn{
display:table-cell;
min-width:100px;
background-color:red;
}
#contentwrapper{
display:table-cell;
width:100%;
background-color:blue;
}
I am trying to make it so that the content box (Div) will automatically re-size when the browser width is changed.
The sidebar has a set width.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Wrapper">
<div id="header">
Stuff
</div>
<div id="sidebar">
Text<br/>Sidebar
</div>
<div id="content">
Stuff<br/>text<br/>Just to fill some space
</div>
<div id="footer">
Stuff
</div>
</div>
</body>
</html>
style.css:
#wrapper{
width:90%;
}
#header{
width:100%;
height:50px;
background-color:lightblue;
}
#content{
/* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
margin-top:4px;
background-color:yellow;
}
#sidebar{
width:100px;
float:right;
margin-top:4px;
background-color:pink;
}
#footer{
width:100%;
height:40px;
margin-top:4px;
background-color:red;
}
Note that this is just code I wrote while writing this question. All I done was missed out extra code that is irrelevant to the question.
This should (Not tested) show a header at the top, and a footer at the bottom.
The part that I need help with is the middle section.
When the browser width gets changed (Smaller of bigger), the sidebar will stay to the right.
I want the "#content" box to automatically re-size so that there is a gap in between the "#content" box and the "#footer" box.
I have tried css width % values but that doesn't work.
Can css do this?
If not, can I get any php or javascript that can do that?
Fiddle : http://jsfiddle.net/logintomyk/fQPse/
HTML (that you need to ammend) :
<div id="content">
<p> <!-- add a paragrap -->
Stuff<br/>text<br/>Just to fill some space
</p>
</div>
CSS (that you need to ammend) :
#content >p {margin-right:100px;margin-top:0px}
add overflow: hidden to #content. this makes it use the "rest" of the width, browser-width minus 100px for the sidebar.
if you want to have an extra gab between the sidebar and your actual content, add the following to #content:
box-sizing: border-box;
padding-right: 20px; /* (or whatever)*/
fiddle: http://jsfiddle.net/urEbY/1/
got what should be an easy one here. Apparently not for me, though.
Essentially, I'm developing a site, (unfortunately, i can't provide a link) and the design calls for a header and footer that spans 100%, while all content within the page (including content in the header and footer) span only 940px and are centered in a wrapper.
The basic page setup i am using is this:
<div id="header">
<div class="headerwrap">
CONTENT HERE...
</div>
</div>
<div id="contentwrapper">
MAIN PAGE CONTENT HERE...
</div>
<div id="footer">
<div class="footerwrap">
FOOTER CONTENT HERE...
</div>
</div>
Here is the CSS I am using as well:
.footerwrap {
position:relative;
margin:0 auto;
width:940px;
}
.headerwrap {
position:relative;
margin:0 auto;
width:940px;
}
.contentwrapper {
position:relative;
margin:0 auto;
width:940px;
}
#header, #footer {
width:100%;
float:left;
}
This works perfectly in a browser, but on the iPhone, it pushes all content to the left of the page, and only lets the images in the header and footer span about 200px when they are supposed to be spanning the entire page.
Here is an example of what it's supposed to look like:
And here is an example of what it looks like on the iPhone.
Here is a simple example of what you are trying to do that I've tested on iPhone.
*{margin:0; padding:0;}
html,body{width:100%;}
header, footer {width:100%; height:200px;background:black;}
div{width:960px; height:500px; background:gray; margin:0 auto;}
Demo