I'm trying to build a CSS page layout based on this old frameset:
<frameset cols="30%,70%">
<frame>left</frame>
<frameset rows="80%,20%">
<frame>top</frame>
<frame>bottom</frame>
</frameset>
</frameset>
What was easy 15 years ago seems to get a bit more complicated nowadays. I wrote the following HTML:
<div id="container">
<div id="left">left</div>
<div id="right">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</div>
Together with this CSS:
#container {
border: 1px solid black;
height: 300px;
}
#left {
border: 1px solid red;
float: left;
width: 30%;
height: 100%;
overflow-y: scroll;
}
#right {
border: 1px solid blue;
margin-left: 30%;
height: 100%;
}
#top {
border: 1px solid red;
height: 80%;
overflow-y: scroll;
}
#bottom {
border: 1px solid red;
height: 20%;
}
I put a demo here.
What I want to achieve and failed so far is the following: Height of #bottom shall be a certain pixel height, not percents. When I do this, I mess up with #top. I tried to use absolute positions to stick #bottom at the bottom but then I don't know how to let #top use the rest of the height.
Any ideas would be appreciated. Thank you.
I think this (fiddle) what you are looking for.
#top {
border: 1px solid red;
height: 80%;
overflow-y: scroll;
}
#bottom {
bottom:0;
border: 1px solid red;
height: 20%;
}
The divs will look like they don't precisely fit but it's only because of the borders. If you want the borders then you can use the css box-sizing property and set it to border-box. See this page for reference. Basically it makes the size of an element include the border which it doesn't by default.
Related
I am trying to display two divs next to each other. The first one is 200x200 pixels and the second is 10 pixels to the right of to the first one. It's 200 pixels high, and its width must fill the right of the page to the right.
I have this so far:
<html>
<head>
<style>
div.div1 {
border: 1px solid red;
color: red;
width: 200px;
height: 200px;
float: left;
}
div.div2 {
border: 1px solid black;
width: 100%;
height: 200px;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">Test123</div>
</body>
</html>
This works for the first two requirements, but when I set width: 100% then it goes below. If I set it to a number in pixels it seems to work though, but won't adjust as I change the size of the window. How can I fix this so the second element extends all the way to right?
You can use flex on the parent, and set .div2 { flex-grow: 1; } to have it consume all of the available space left over from .div1
body {
display: flex;
}
.div1 {
width: 200px;
height: 200px;
color: red;
border: 1px solid red;
}
.div2 {
border: 1px solid black;
margin-left: 10px;
flex-grow: 1;
}
<div class="div1">div1</div>
<div class="div2">div2</div>
you can use calc:
.div2 {
width: calc(100% - 214px);
}
that is 100% minus 200 px, 10px margin, 4px border (2x left and right borders)
Try this:
<html>
<head>
<style>
#div1 {
float:left;
width:200px;
border:1px solid red;
min-height:200px;
}
#div2 {
margin-left: 210px;
border:1px solid green;
min-height:200px;
}
</style>
</head>
<body>
<div id="div1"> </div>
<div id="div2"> </div>
</body>
</html>
Tip 1: Use percentage in both divs to add a total of 100%.
Tip 2: Use the max-width property, so that the second div can extend to no longer then a certain point.
Tip 3: Use the developer tools (inspect), select the second div and increase the pixels width until it reaches the total width of the page.
I have the following webpage.
I am trying to get the blue red and white gradient to fill the entire height of the screen. Currently I have both flags on either side of the content container, all of them are surrounded by a main container.
.container{
width: 100%;
background: -webkit-linear-gradient( $blueToRed);
background: -o-linear-gradient($blueToRed);
background: -moz-linear-gradient($blueToRed);
background: linear-gradient($blueToRed);
margin-bottom: -99999px;
padding-bottom: 99999px;
overflow: auto;
}
is inside of firstContain
.firstContain{
border-left: 4px solid white;
border-right: 4px solid white;
background: #FFF;
max-width: 980px;
position: relative;
display: block;
margin: 0 auto;
overflow: auto;
z-index:1000;
}
I am trying to get contain to be 100% height, but I add that and it doesn't move. I thought the 99999 margin padding trick would work, and it did, but then I lost some css that made it work. Any help is welcome. Thanks in advance for the advice in what I am doing wrong.
Try vh unit.
.container{
min-height:100vh;
}
Try adding height: 100% in both your html, body, .container in your styles like this:
html, body, .container {
height: 100%;
}
.container {
border-left: 4px solid white;
border-right: 4px solid white;
background: #333;
max-width: 980px;
position: relative;
display: block;
margin: 0 auto;
overflow: auto;
z-index:1000;
}
<html>
<head>
</head>
<body>
<header></header>
<div class="container">
<p>Website Content</p>
</div>
<footer></footer>
</body>
</html>
For now, maybe you can go with
min-height: 100%;
in your container css, since there are no elements in the page to cover the height. So, min-height should do the work for you!
I have a problem on making CSS to fill remaining width space. I've tried so many other answers in stackoverflow and the same problem occur, the div keeps on breaking into a new line. Here's my code:
http://jsfiddle.net/YSLJX/
I've tried these but nothing works...
width: 100%
width: available
width: auto
You can simplify your html, float the image element left (u_img) then apply overflow hidden to the second element (u_msg), this will 'tell' it to apply block level behaviour and stretch to the remaining space.
Demo Fiddle
HTML
<div id="chat" style="height: 350px;">
<div class="u_img">
<img src="https://lh3.googleusercontent.com/-g_zvhql17tw/AAAAAAAAAAI/AAAAAAAAARE/xQMDsE3q_K0/w48-c-h48/photo.jpg"" />
</div>
<div class="u_msg"><span class="post_time">Tue May 6 13:52:34 2014</span><span class="u_name"><b>Qixster</b>:</span><span id="msg_container" style="color: #000;font-size: 16px;">test</span>
</div>
</div>
CSS
#chat {
width: 100%;
height: 100%;
overflow:hidden;
border: 1px solid #c0c0c0
}
.msg {
border: 1px solid #c0c0c0;
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
}
.u_img {
float: left;
max-height: 48px;
}
.u_msg {
padding-left: 5px;
font-family:'Ubuntu', sans-serif;
word-wrap: break-word;
overflow:hidden;
}
.u_name {
float: left;
}
.post_time {
float:right;
right:0px;
color:#c0c0c0;
font-size:10px;
}
The alternative would be to apply a display:table structure
Im making a responsive site. I have 3 divs (.block) that I need to sit along side each other horizontally.
When the screen is wide enough this is easy to achieve. However when I make the browser more narrow the third div (3) wraps onto the next line but what I want is for all of the div.blocks to wrap to the next line.
Can this be done without media queries? I want CSS that will keep working if the width of the elements is dynamic.
http://codepen.io/anon/pen/KeulD
<div class="other-block">
Other block
</div>
<div class="cont1">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
.cont {
width: 25%;
}
.block {
float: left;
border: 1px solid green;
width: 70px;
height: 70px;
}
.other-block {
height: 70px;
width: 300px;
border: 1px solid red;
float: left;
}
What about float .cont1 too :
.cont1 {
float:left;
}
The Codepen demo
One solution is this :
http://jsfiddle.net/ZFacP/1/
.cont1 {
width: 210px;
float:left;
}
.block {
float: left;
border: 1px solid green;
width: 70px;
height: 70px;
box-sizing:border-box;
}
.other-block {
height: 70px;
width: 300px;
border: 1px solid red;
float: left;
}
If you want to use in the .cont1 widht 25% make the .block divs in percentage example:
http://jsfiddle.net/ZFacP/2/
.cont1 {
width: 25%;
float:left;
}
.block {
float: left;
border: 1px solid green;
width: 33.333%;
height: 70px;
box-sizing:border-box;
}
Is there any work around to do something like this work as expected?
I wish there were something like that width:remainder; or width:100% - 32px;.
width: auto; doesn't works.
I think the only way possible is working around with paddings/margins, negative values, or float, or some html tags hack. I tried also display:block;.
I like to get the same result as this, without tables http://jsfiddle.net/LJGWY/
<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
<div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
<div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>
Updated answer:
The answers here are pretty old. Today, this can be achieved easily with flexbox:
.container {
border: 4px solid red;
display: flex;
}
.content {
border: 4px solid green;
flex-grow: 1;
margin: 5px;
}
.sidebar {
border: 4px solid blue;
margin: 5px 5px 5px 0;
width: 200px;
}
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet.
</div>
<div class="sidebar">
Lorem ipsum.
</div>
</div>
Original answer:
Block level elements like <div> will fill 100% of the available width automatically. If you float one of them to the right, the contents of the other will fill the remaining space.
<div style="height: 100px; border: 3px solid red;" id="container">
<div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
<div style="border: 3px solid green;">Fill</div>
</div>
http://jsfiddle.net/5AtsF/
For anyone looking over this now theres a newish css property method called calc which can perform this in a much more flexible fashion.
<div class="container">
<div class="fixedWidth"></div>
<div class="variableWidth"></div>
</div>
.fixedWidth{
width:200px;
}
.variableWidth{
width:calc(100%-200px);
}
As a word of warning, this is not very portable and support is ropey on mobile devices. IOS 6+ and andriod 4.4 i believe. Support is significantly better for desktop though, IE 9.0+.
http://caniuse.com/calc
I have used a JS hack in the past to achieve this technique if anyone is incredibly stuck, a different layout is more advisable though as resize is slower.
window.addEventListener('resize', function resize(){
var parent = document.getElementById('parent');
var child = document.getElementById('child');
child.style.width = parseInt(parent.offsetWidth - 200) + "px"; //200 being the size of the fixed size element
}, false);
If you don't know how big will be the fixed part you can use the flex 9999 hack.
<div class="container">
<div class="fixedWidth"></div>
<div class="variableWidth"></div>
</div>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.fixedWidth {
flex: 1;
}
.variableWidth {
flex: 9999;
}
This should do for you:
<div style="position: absolute; width: 100%; height: 100px; border: 3px solid red;" id="container">
<div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
<div style="display: block; margin-right: 100px; border: 3px solid green;">Fill</div>
</div>
See the jsFiddle
This is assuming you're going to be removing the 3px borders from the end result (they overlap in the example because border width is not included in the width).
You can acheive this without change your markup with use display:table property for this:
.parent{
position: absolute;
left:0;
right:0;
height: 100px;
border: 3px solid red;
display:table;
}
.fill{
margin-right: 100px;
border: 3px solid green;
display:table-cell;
width:100%;
}
.fixed{
width: 100px;
border: 3px solid blue;
display:table-cell;
}
Check the live example with no horizontal scrollbar
http://jsfiddle.net/WVDNe/5/
Another example but in better way check this:
http://jsfiddle.net/WVDNe/6/
note: it not work in IE7 & below
Check this also
http://jsfiddle.net/LJGWY/4/
It's work in all browsers.
Try setting the position like so:
<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
<div style="position:absolute; left: 0; top: 0; right: 100px; border: 3 solid green;">Fill</div>
<div style="position:absolute; top: 0; right: 0; width: 100px; border: 3 solid blue;">Fixed</div>
</div>
You could put the fixed div inside the the fill div.
<div id="container">
<div>Fill
<div>Fixed</div>
</div>
</div>
CSS
#container{
position:absolute;
width:90%;
height:100px;
border:3px solid red;
}
#container div{
height:95%;
border:3px solid green;
width:100%;
}
#container div div{
height:95%;
width:100px;
border:3px solid blue;
float:right;
}
Example: http://jsfiddle.net/EM8gj/3/
you can use table style.
create a div with table style and sub items be that's table-cell styles
label text
Try CSS calc() function.
width: calc(100% - 100px);
That's it