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;
}
Related
Please see this pen in Chrome: codepen example
html:
<div class='flexbox'>
<div class='static'>ddd
</div>
<div class='flex'>
<div class='flex-child'>
<div class='container'>
*** very long text here *** ...</div>
</div>
<div class='flex-child'>hhh
</div>
<div class='flex-child'>hhh
</div>
</div>
<div class='static'>ddd
</div>
</div>
css:
html,body{
margin:0;
padding:0;
overflow:hidden;
}
.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;
display: flex;
flex-direction:column;
}
.flex{
background:blue;
flex:1;
display:flex;
position : relative;
}
.flex-child{
background:red;
width:100%;
display:block;
color:white;
position : relative;
}
.static{
background:transparent;
width:100%;
color:yellow;
}
.container{
position : relative;
background:magenta;
height:100%;
}
I believe the example is almost selfexplanatory.
The question is: How to do it, to have the .container div ready to host any kind of content, unknown at the moment, and not to overlap over the footer.
try to remove background colors. the text from .container is visually mixed with the text of the .static footer. How to arrange it and have the .content div and its text not to overlap the footer?
edit:
The footer should be at the bottom of the viewport.
No explicit sizes or dimensions are allowed to be set in css.
Please take my question as an example, an experiment.
My concern is not to use any explicit sizes or dimensions e.g. header height 50px, I want to have the layout as general as possible. so if I formulated my question in other words:
pls in my original codepen delete all the text from the .container and then check the .container height via developer tools. It will be 0, but I would expect it to be the same height as it's parent .flex-child is.
I know that it probably would not be following the specification, but how to achieve this?
edit 2:
I described my problem in more detail in another question, with codepen and picture. Thank you for your ideas. https://stackoverflow.com/questions/32114925/header-flexible-body-with-nested-flexible-columns-footer-concrete-layout
thank you
Your actual requirements are a little unclear as to the actual position of the footer.
Option 1.
The footer should be at the bottom of the viewport and so the whole page must be contained within the viewport.
In this case the content of the main element can be any size and a scrollbar is added when content will overflow the height of the element.
Codepen Demo
Option 2.
The footer should be at the bottom of the page/document and the page can be any height (presumably with a minimum of the viewport height).
In this case the content of the main element can be any size and the page/dicument will increase in size to accomodate it
Codepen Demo
I have a couple of pages that seem to cause some conflicting results. I have a login page that should have a background of gray, and then my inner pages have a background of white.
But the div with id="loginPage" doesn't stretch the entire height of the "container" div. Therefore the loginPage div is gray but the space leftover for the container div is still white.
Now, the main container has a min-height because I have a couple pages with a large amount of content. When I set it to only height:100%, the footer isn't on the bottom of the page. But once I had set it to min-height it drops to the bottom of the page.
Here is my css:
html, body { height: 100%;}
#loginPage {
width:100%;
height:100%;
float:left;
background-color:#F7F7F9!important;
}
#container
{
min-height:95%;
position: relative;
background:white;
}
.footerBg
{
width:100%;
padding-top:10px;
margin:0;
position:relative;
}
and html:
<div id="container">
<div class="topHeader_login">
<form method="post" action="/">
<div id="loginPage">
<div id="login_content">
<div id="login">
<div id="info">
<div style="text-align:center; padding-top:15px; float:left;"> </div>
</div>
</div>
</form>
</div>
<div class="footerBg">
I think you may want to have a look at this: http://ryanfait.com/sticky-footer/
It explains how you can keep your footer always on the bottom of your page, even if the content is smaller, and it never adds scrollbars if they are not nessecary. You could then just add your 'grey' background color to the page wrapper.
If you want to set a height on your web pages to a percentage, you
have to set the height of every parent element of the one you want the
height defined.
source: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm
try giving form { height: 100% }
take a look at this fiddle, I cleaned up your html and css
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>
I am trying to create a website where I have several divs positioned in-front of a background div by using z-index and position:absolute. This background div will be transformed later into a content carousel so it is vital that its text are selectable. My current code does not allow for the text and link to be selected and I am wondering how would I fix this.
http://jsfiddle.net/6fwf9/2/
HTML:
<div id="header" class="box">header</div>
<div id="bg">
Cannot highlight this text <br>
Cannot click on this link
</div>
<div class="box">content</div>
CSS:
.box { width: 150px; height:50px; background:aqua; margin:20px; }
#header { margin-bottom: 150px; }
#bg { width:200px; height:200px; padding-top:100px; background:pink;
position:absolute; top:0; z-index:-10;}
EDIT - Image of what I am trying to achieve: http://imgur.com/r9tYx
Make sure the overlaid elements (.box) don't sit in front of the text content, if they are to be selectable. That means positioning them some other way than by using margins. This example works because the boxes uses absolute positioning: http://jsfiddle.net/2pPKz/
Alternatively, if the background is to become a carousel, couldn't you worry about it when it's actually a carousel, and move it to the front then?
I just saw your picture, This is how I would do it.
<div id="bg">
<div id="container">
Cannot highlight this text
<br>
Cannot click on this link
</div>
</div>
<div id="header" class="box">header</div>
<div class="box">content</div>
And for the CSS, Please take notes that I put border around the container to show where it is and what is the width and height
.box{
width:150px;
height:150px;
z-index:2;
position:absolute;
background: cyan;
top:150px;
left:20px;
}
#bg{
background-color:pink;
width:200px;
height:170px;
position:absolute;
top:0px;
}
#header{
position:absolute;
width:150px;
height:50px;
left:20px;
top:20px;
z-index:2;
background: cyan;
}
#container{
width:100%;
position:relative;
border:1px solid black;
margin-top:100px;
}
The only thing left is you play with your dimention.
Actualy I put everything absolute exept the container.
It is because the bottom margin of the Header is over the text. I sugest you to change the way you are doing things here. Why don't you just make elements be inside the bg box?
<div id="bg">
<div id="header" class="box">header</div>
<p>Cannot highlight this text Cannot click on this link</p>
<div class="box">content</div>
</div>
With static position? Even if you want to use absolute positioning, you could have everything inside the bg div and have it with position:relative, so the elements inside will be positioned absolutely respected to it.
Unfortunately the only way to do what you're trying to do is to split up the background and the text content for the slider.
That means each slide would need to consist of a background div that is absolutely positioned behind the content, and a content div that is absolutely positioned in front of everything else.
I am using php to dynamically create webpages. As such I have things more objectified. My generic page creates a header, a mainbody and a footer. The content is the placed inside of my mainbody.
Mainbody has a min-height of 600px.
A div inside of mainbody for one page acts as a menu on the left side of mainbody. I want this div to be 100% of the height of the mainbody.
The div (menu) is floating left, and the rest of the mainbody content is generated dynamically by the php.
What doesn't Work:
height:100%; (It just ends up being the height of the content I have inside the menu, not the height of the mainbody)
min-height:600px; (It just stays 600px, even when mainbody gets larger)
Haven't played with it enough, but position absolute, absurdly large height, and a negative z index, and mainbody overflow...not successful with the little bit I tried.
Any ideas? I'm totally open to doing any kind of weird manipulation, so long as it looks natural.
Here's example code: jsfiddle.net/TButx
http://jsfiddle.net/TButx/56/
The solution is to pad the bottom of the column and hide overflow.
#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;}
#mainbody {min-height:300px; height:100%; overflow: hidden;}
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;}
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;}
#clear {clear: both;}
<div id="html">
<div id="mainbody">
<div id="menu"></div>
<div id="content"></div>
<div id="clear"></div>
</div>
</div>
There must be an error in your code. As you describe it, everything should work.
Like here: http://jsfiddle.net/VxSA3/
HTML:
<div id="Mainbody">
<div id="menu">menu content</div>
<p>some text in the main-body</p>
</div>
CSS:
#Mainbody{height:600px;outline:1px solid green;}
#menu{height:100%;outline:2px solid red;float:left;width:100px;}
A common problem with this is that your main body div isn't wrapping around your floating elements. You have to have a div in it with clear:both and the body div will stretch.
As an alternative method, you can use absolute position to control the stretch of the menu div.
For the main body div:
position:relative;
For the left floated div (no longer left floated in this case):
position:absolute;
left:0px;
bottom:0px;
top:0px;
width:...