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;
}
Related
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.
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 want to make a box(in a form of div) that could arrange and move around objects in.
But, when I try to make objects to alight to left they pop out of it.
How can I fix this issue?
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100px;
overflow: hidden;
clear:both;
}
Try this(replace your class)
Edited found the answer:
just add position:relative;
to #slide in css file
HTMl
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slide">
<div id="right">
</div>
<div id="left">
</div>
</div>
</body>
Css
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100;
}
#right
{
top:40%;
height:20px;
width:20px;
background:black;
right:0;
position:absolute;
}
#left
{
top:40%;
height:20px;
width:20px;
background:black;
left:0;
position:absolute;
}
I have a problem that I can't solve. I want my main div to expand vertically when its child div is filled with content, but couldn't make it. When I add lorem text to the left div, it expands if the text contains more than its original width, but the main div isn't expanding. How can I solve that problem?
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
</html>
CSS
#main{
background-color:#ff8f79;
width:900px;
min-height:400px;
margin:0 auto;
position:relative;
}
#left{
position:relative;
width:300px;
min-height:300px;
float:left;
background-color:blue;
}
#middle{
width:300px;
height:300px;
float:left;
background-color:green;
}
#right{
width:300px;
height:300px;
float:left;
background-color:black;
}
add this to css
#left, #middle, #right {
word-wrap: break-word;
}
keeps all the text within each individual box and they expand and also expand the main
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;
}