I am able to make a two column layout that extends the full length of a container-fluid using absolute positioning. What I want to do is be able to create a two column layout where each column fills up the entire container using row-fluids. However, when I try this my row fluid only take up the height of the text in the div.
Here is an example of what I want to be able to do but where the row-fluid extends to the bottom of the container.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>
But the only way I can get it to work is using absolute positioning which I found an example of on this site.
<div class="container-fluid">
<div id="sidebar">
</div>
<div id="content">
</div>
using this css:
html, body {
height: 100%;
background-color:darkcyan;
}
.container-fluid {
min-height: 100%;
padding:0px;
}
#sidebar, #content {
position: absolute;
top:0;
bottom:0;
}
#sidebar {
left: 0;
width: 15em;
background-color: bisque;
}
#content {
left: 18em;
right:0;
background-color:bisque;
}
Here is a link to a fiddle that works using absolute positioning, but I want to get a similar effect using bootstrap row-fluids and spans. http://jsfiddle.net/PrFeA/
Any ideas?
Percentage values in CSS need an explicit value in the parent element, otherwise they won't work, that means that to get your .span columns to fill the .container-fluid height, you need to set an explicit height value to both .container-fluid and .row-fluid:
html, body {
height: 100%;
background-color:darkcyan;
}
.container-fluid {
height: 100%;
padding:0px;
margin:0px;
}
.row-fluid{
height: 100%;
}
/*Styles for the span columns*/
.row-fluid > div{
background: bisque;
height: 100%;
}
Check out the updated fiddle
Related
I can't figure out why the height of the #container div is calculated correctly at 200px when a display:table-row is applied to the #header div and it's too large when a display:table-caption is applied to the #header div.
I've tested this in Chrome 35
Does someone know why this is the case and/or is there a simple fix?
( preferably without javascript or adding extra divs)?
I want the #header div's height to be as small as it's content, and it's width to be 100% of the #container div, and the #container to fit exactly in the #main div.
jsfiddle: http://jsfiddle.net/2SKY4/
CSS:
#main {
width: 200px;
height: 200px;
background-color:#ff0;
}
#container {
background-color: #0f0;
width: 90%;
display:table;
height:100%;
}
#header {
background-color:#F0F;
display:table-caption;
}
#splitpanel {
display:table-row;
background-color:#0ff;
}
#leftpanel {
background-color: #f00;
overflow: scroll;
display: table-cell;
}
#rightpanel {
background: #00f;
overflow: scroll;
display: table-cell;
}
HTML:
<div id="main">
<div id="container">
<div id="header">Header</div>
<div id="splitpanel">
<div id="leftpanel"></div>
<div id="rightpanel"></div>
</div>
</div>
</div>
I am not sure what you want. the fiddle already has like you want it seems.
you are better off showing snapshots and say what you want. you are using "display" of different types which also doesnt make much sense. can you please describe what structure you want in snapshot?
I want to create a layout of 3 columns. The center has a fixed width (e.g. 500px). The sidebars need to have a fixed position, so that their content remains always visible. This content has to be floated close to the middle column.
Here is what I came up with so far. Unfortunately, I couldn't fix the sidebars. The code is replicated below.
HTML:
<div class="wrap">
<div id="pixelLeft">
<div id="pixelLeftContent">
Column 1 has to be fixed, with liquid width.
It's content needs to be floated to left;
</div>
</div>
<div id="bannerCenter">
</div>
<div id="pixelRight">
<div id="pixelRightContent">
Column 2 has to be fixed, with liquid width.
It's content needs to be floated to right;
</div>
</div>
</div>
<div style="clear:both;"></div>
CSS:
*{
margin:0;
padding:0;
}
#bannerCenter {
background:#ddd;
width: 500px;
float:left;
height: 1000px;
}
#pixelLeft {
background:#999;
width: calc(50% - 250px);
float:left;
}
#pixedLeftContent {
width: 50%;
float:right;
}
#pixelRight {
background:#999;
width: calc(50% - 250px);
float:right;
}
#pixelRightContent {
width: 50%;
float:left;
}
#pixelLeft, #pixelRight {
height: 400px;
}
Try something like this, i dont think css supports % and px together... it may solve your problem..
Modify Your css like this:
#pixelLeft{
width: 50%;
float:left;
position: relative;
}
#pixelLeftContent{
background:#999;
float: right;
margin-right: 250px;
}
I want to create a page with sidebar and content. The sidebar has fixed width(200px) and content should be
(body_width - sidebar width)
. So created in jQuery and working perfectly.
Edit
Example
But I want to know, is this possible do in CSS Only?
You can do this using display: table; on the containing div and then display: table-cell; on the inner divs. You can then apply a minimum width to the sidebar and the content will take up the rest of the page.
A demo can be found here
Don't let the use of display: table put you off - this isn't using tabular mark up or making your html less semantic. It is merely making your browser treat the div as it would a table cell (which is exactly what you require)
HTML:
<div id="main_wrap">
<div id="sidebar">1</div>
<div id="content">2</div>
</div>
CSS:
#main_wrap {
display: table;
}
#sidebar {
background:red;
min-width: 200px;
display: table-cell;
}
#content {
background:blue;
display: table-cell;
width: 100%;
}
Hey you can get your desired with pure css to give the margin-left:200px; to your #content
CSS
#main_wrap {
border:3px solid green;
}
#sidebar{
background:red;
width: 200px;
float:left;
}
#content{
background:blue;
margin-left:200px;
}
DEMO
You can try use negative margin.
full explanation and example (with demo):
https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/
HTML:
<div class="wrapper">
<div class="content">
</div><!-- .content -->
<div class="sidebar">
</div><!-- .sidebar -->
</div><!-- .wrapper -->
CSS:
.wrapper{
margin-right: 200px;
}
.content{
width: 100%;
float: left;
}
.sidebar{
float: right;
width: 200px;
margin-right: -200px;
}
you can do this with css, just remove the width and float from #content.
#content{
background:blue;
}
Check the jsFiddle File
Can I make a banner reach outside of its container, without creating horizontal scrollbars if the window is too narrow?
I thought I had done this before with negative margins, but can't get it to work now.
Demo: http://jsfiddle.net/Znarkus/s95uz/
<div id="main">
<div id="banner">I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content">
</div>
</div>
You can use a container that has a min-width of 500px or width 100% depending on if you want a scroll bar or none at all; add position relative, and overflow hidden and then inside of that add another container that is your set width of 500px with a margin of auto for the left and right. Put your content inside of the inner container using position absolute; in this case your #banner would be right: -50px;
I've modified your fiddle here: http://jsfiddle.net/s95uz/14/
<style type="text/css">
#main {
min-width:500px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#inside{
width:500px;
margin:0 auto;
height:100%;
position:relative;
background: red;
}
#banner {
background: green;
position: absolute;
right: -50px;
width: 150px;
height: 300px;
}
#content {
width: 400px;
height: 500px; /* Simulate content */
background: blue;
}
</style>
<div id="main">
<div id="inside">
<div id="banner">
I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
<div id="content"></div>
</div>
</div>
Just add overflow : hidden to the div "main" css.
Adding this to an element hides the possible conditional sidebars.
Your new css will look like;
#main {
width: 500px;
margin: 0 auto;
background: red;
position: relative;
overflow:hidden;
}
You can use responsive CSS and hide the banner when the content plus the banner are higher than the viewport:
#media only screen and (max-width: 550px) {
#banner { display: none;}
}
I have two div elements inside one div element. These two div elements are both 50% wide and other one is floated to left and the other is floated to right. The right floated div contains one high picture (in different heights) and left floated div contains text. On the left div these texts are separated into three different sized rows and the whole left div should be as high as the right div. How am I able to do this using only CSS? Here's my example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
.container {
width: 100%;
height: 100%;
overflow: auto;
background: #FF0;
}
.left {
float: left;
width: 50%;
background: #F0F;
}
.left .first {
height: 20%;
}
.left .second {
height: 50%;
}
.left .third {
height: 30%;
}
.right {
float: right;
width: 50%;
}
.right img {
display: block;
max-width: 100%;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</body>
</html>
The short answer is that you can kind of do this, but I don't think it will behave the way you expect.
You would have to declare explicit heights for the two <div>'s -
.left, .right {
height: 100px /*or whatever height you want*/;
}
If this is a static page, and the image never changes, you can manually enter the pixel amount.
If the picture is going to change, and you don't know what the height is going to be, you cannot get the left div to match the height of the right div using plain CSS.
There are ways to fake it (see the faux columns technique), but you cannot programmatically get one div to change it's height to match another one.
There are ways to do this with JavaScript, but I'm not going to get into them because you asked about CSS (and I hate using JS to manipulate layout like that - it's very unreliable).
Also: if your containing div, .container, collapses, it's because you need to either float it, or apply a clearfix technique.
There are a few things you need to do:
You need to float the containers.
You need to add an extra container and nest the divs in the following order:
<div class="container2">
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</div>
Then you need to relative position your containers and move them to the right. After that, you'll move your content divs from the left.
For your CSS:
.container {
width: 100%;
float: left;
position: relative;
right: 50%;
}
.container2 {
width: 100%;
float: left;
overflow:hidden;
position:relative;
}
.left {
float: left;
width: 50%;
left: 50%;
position: relative;
background: #F0F;
}
.right {
float: left;
width: 50%;
left: 50%;
position: relative;
}
Please see this page if you're having difficulties.