I've a problem with simple html/css trick.
I want to create website with 100% height left bar with e.g. width 300px and on the right side i want contener div with the rest of the width.
below code:
html {min-height:100%; position relative;}
body {margin:0px; height:100%;}
.left-bar {position:absolute; width:100px; background:#f8e8bc; top:0; bottom:0; left:0; right:0; overflow:hidden;}
.contener {float:right; right:0px; width: calc(100% - 100px); height:100%; background:#eee;}
.box {margin:auto; width:150px; height:500px; overflow:hidden; border:1px solid #ccc;}
<html>
<body>
<div class="left-bar"></div>
<div class="contener">
<div class="box"></div>
</div>
</body>
</html>
Use position: fixed instead of absolute.
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
Can anyone help me?
My code below is not working in responsive mode.
Parent container placement should be at the right side of the screen.
Here's my code
.parent {
position:relative;
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
Like so:
html,body{
margin:0; padding:0;
}
.main{
width:980px; background:darkGreen; margin:0 auto;
}
.rel{
width:400px; height:200px; background:#000; margin:0 auto; position:relative;
}
.abs{
width:550px; height:100px; background:yellow; position:absolute; left:-75px; top:50px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
</head>
<body>
<div class='main'>
<div class='rel'><div class='abs'></div></div>
</div>
</body>
</html>
.child {
position:absolute;
width:150%;
border:1px solid blue;
}
You don't need to have left and right values when you have width, unless you want to specify the position.
A left:0; means that the leftmost part of the div is at the leftmost part of its parent div while a right:0; means that the rightmost part of the div is at the rightmost part of its parent div- this could act as a replacement for the width as
left:0;
right:0;
is similar to
left:0;
width:100%;
With this, you could specify a
left:0;
right:-10%;
and it would be equivalent to a
left:0;
width:110%;
P.S. you could also use VW and VH instead of %.
A 100% refers to the full size of the parent while a 100vw refers to the full width of the viewport.
remove position:relative from parent and in your code you forget one semi colon (;) after right property of your .child.it,s important to put a semi colon after every property in css.
html,body{
width:100%;
height:100%;
}
.parent {
/*position:relative;*/
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
I'am trying to have header,content and footer as dynamic fields. Tried a lot of different solutions, and it must work in multiply instances. I need a the scroller only in content area, so I haven't used absolute zero on the footer. But uses table layout.
If you look at the code snippet, you can see that the content #wrapper(yellow) have the same size as content. But I can't get the scoller when content (#overflow, black) get heigher than the wrapper.
I know a little script can solve this, but is it possible just With CSS??
The link below is something simular but there is no good answer. Maybe this can be, If it is possible to get a working scroller in content area.
CSS 100% height layout. Fluid header, footer and content. In IE10 and firefox
<style>
body {
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
}
#wrap {
height: 150px;
width: 400px;
display:table;
position:absolute;
text-align:center;
table-layout:fixed;
border:1px solid black;
}
#header{
display:table-row;
border:1px solid red;
background:green;
}
#content{
height: 100%;
background:blue;
display:table-cell;
}
#wrapper{
width:100%;
min-height:100%;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
#footer{
width: 100%;
display:table-row;
background:green;
}
</style>
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="content">
<div id="wrapper">
<div id="overflow" style="height:50px;width:1px;border:10px solid black;"></div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
You should specificy a height for the wrapper element
#wrapper{
width:100%;
/*min-height:100%;*/
height:100px;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
Here the working Fiddle with your example.
Consider a simple example with html
<div class="parent">
<div class="child">
</div>
</div>
and CSS
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:40px;
left:30px;
width:70px;
height:70px;
background:blue;
}
to place a DIV with absolute position just beneath its parent (with relative position).
In this example, I equaled the absolute's top to the parent relative's height.
How to align the absolute DIV just under the parent when the height is unknown (both parent and child)?
Didn't think this would work myself, but it seems to:
html, body {
height: 100%;
}
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:100%;
left:30px;
width:70px;
height:70px;
background:blue;
}
Check this..
HTML:
-------
<div class="parent">
</div>
<div class="child">
</div>
CSS:
-----
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:auto;
left:30px;
width:70px;
height:70px;
background:blue;
}
(Example)
you can use negative value for bottom, eg. bottom: -100px
EDIT: here is better solution: http://jsfiddle.net/mqy4z/3/ - set child's position to top:100%
Try placing both div's in your HTML file under eachother:
<div class="parent">
</div>
<div class="child">
</div>
I have two <div>s side by side, in a two column layout. I want to make the second div width auto fit to the browser width... but my CSS isn't quite working:
<style>
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
}
#content{
float:left;
width:auto;
min-height:10px;
overflow:hidden;
margin:auto;
background-color:#cddfea;
}
</style>
<div id="sidebar">aa</div>
<div id="content"></div>
How can I make the width of the "content" div fit the rest of the browser window while my sidebar has a width of 230px?
Thank you. :)
Try this: jsFiddle
HTML:
<div id="sidebar">aa</div>
<div id="content">bb</div>
CSS:
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
background: #faa;
}
#content{
min-height:10px;
overflow:hidden;
margin-left:230px;
background:#cddfea;
}