I have a two-column fluid layout, with the left-hand side set to width: 40% and the right-hide side set to width: 60%. I'd like to allow users to resize their browser as large or small as they'd like, but I must have the left-hand side display a minimum width of 300px.
The following is the code I am currently using for the fluid layout, which includes the min-width specification. But, CSS is ignoring it! It allows the left-hand column to shrink below 300px.
I've also attempted to set min-width to a percentage, such as 20%, but CSS ignores this specification as well.
div#left {
background: #ccc;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 40%;
min-width:300px;
height: 100%;
}
div#right {
background: #aaa;
position: fixed;
top: 0;
width:60%;
right: 0;
bottom: 0;
}
jsFiddle Fullscreen Example: http://jsfiddle.net/umgvR/3/embedded/result/
jsFiddle Code: http://jsfiddle.net/umgvR/3/
What is causing this? How can the code be corrected?
If you're not too attached to the fixed positioning, this should do what you want.
View on JSFiddle
HTML
<div id="left">Left</div><div id="right">Right</div>
Note the lack of whitespace between the elements
CSS
html, body {
height: 100%;
}
body {
min-width: 800px;
}
div#left {
background: #ccc;
display: inline-block;
width: 40%;
min-width:300px;
height: 100%;
}
div#right {
background: #aaa;
display: inline-block;
width:60%;
height: 100%;
}
This should also work...
html
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
css
body, div {width:100%;
height:100%;
margin: 0;
}
#container {
display:block;position: fixed;
}
#left, #right {
display: inline-block;
}
div#left {
background: #ccc;
min-width: 300px;
max-width: 40%;
}
div#right {position:fixed;
background: #aaa;
width: 60%;
}
I found out that the left hand div is keeping the minimum width, but its going underneath the right div. If you bring it forward, you can see it on top of the right div. I don't think that this is ideal though.
z-index: 1;
I used z-index: 1; on the left right and z-index: 0; on the right div.
It works but I think there are better solutions out there.
Related
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I have a webpage header that I am trying to make overlap with a border. Here is a jsfiddle of a simplified version of what I have.
This is what I am aiming for: (The second row of images is what would happen if the page width is reduced.)
I tried using absolute positioning of the green (logo), but this causes the menu (yellow) to overlay with the logo instead of vertically stacking on the page like happens now.
My next idea was to give the border (red) absolute positioning, but in various attempts at that I always seemed to end up with the border at the top of the page, like the header div was ignoring the height of the logo/menu. That was set up something like:
#header {
position: relative;
}
#border {
position: absolute;
bottom: 0;
}
Any suggestions on how to set this up, either fixing what I have or trying a different approach altogether?
Edit:
Here's a better depiction of why I'm trying to do this, using the same colors (why the overlap and why the yellow menu should end up over the logo):
So something like this?
The green block is overlapped by the red border block.
Edit - Added percentage width and #media query so it resizes.
Have a fiddle!
HTML
<div id="header">
<div id="menu">
Contents
</div>
<div id="logo"></div>
</div>
CSS
#header {
width: 100%;
max-width: 700px;
min-width: 320px;
height: 200px;
position: relative;
background: blue;
}
#logo {
background: green;
height: 80px;
width: 190px;
position: absolute;
top: 80px;
left: 40px;
}
#menu {
height: 40px;
width: 300px;
background: yellow;
display: block;
position: absolute;
top: 80px;
right: 0;
}
#media screen and (max-width: 600px) {
#menu {
top: 30px;
}
}
#header:after {
content:'';
height: 80px;
width: 100%;
display: block;
position: absolute;
bottom: 0;
background: #F00;
}
I have four DIVs :
The first div has a fixed height and located on top (header).
The second div also has a fixed height and located below the first div.
The fourth div has a fixed height located on bottom.
The third div will have a variable height: it will expand to make the total of four divs are full to vertical space in browser IF the content is less than that. But it will follow the content's height if the content's height is larger than that. So at all times, I want the first div (the header) to stick at the top of the page, and the fourth div (the footer) to stick at the bottom of the page. I have no way to know how tall the content will be.
header
header
header
header
the CSS file:
#container { width:800px; height:*; }
#header { height:200px; }
#menu { height:50px; }
#content { height:*; }
#footer { height:150px; }
can I actually do this? how is the correct css way to do this? I get the feeling this should be not too hard, but I can't find relatable answers anywhere. Thank you.
What you could do is something like this:
#content { height: 100vh; /*100% of viewport height*/
margin-top: 250px;
margin-bottom: 150px; }
This way it will always be 100% of the screen height in total.
Well that turned out looking cool, JSBin
HTML
<div class="header">Header !</div>
<div class="menu">Menu !</div>
<div class="content">Content !</div>
<div class="footer">Footer !</div>
CSS
body { margin: 0; }
.header { width: 100%; height: 200px; position: fixed; top: 0; }
.menu { width: 100%; height: 50px; position: fixed; top: 200px; }
.footer { width: 100%; height: 150px; position: fixed; bottom: 0; }
.content { width: 100%; position: fixed; top: 250px; bottom: 150px;
overflow: auto; }
There are 3 divs, side by side to each other.
so div1 div2 div3
Is there a way to focus the scroll only on div2? so that the contents of div1 and div3 is always seen while the user 'scrolls' only on div2?
Preferably a css solution if possible. If not, what solutions are possible?
#div1, #div3
{
overflow: hidden;
}
#div2
{
overflow:scroll;
}
If you want to hide horizontal scroll use: overflow-x:hidden and for vertical use overflow-y:hidden
Add the following css:
body, #div1, #div3
{
overflow:hidden;
}
#div2
{
overflow-y:scroll;
}
Note that you need to set a width and height to the elements, and anything that goes outside of the width and height of div1,div3 and the body won't be shown, while in div2 it will be scrollable.
You could fix the position of the first and last div, so only the center div will scroll;
HTML
<div class="l">left</div>
<div class="m">middle</div>
<div class="r">right</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.l, .r {
width: 33%;
height: 100%;
position: fixed;
background: lightgreen;
top: 0;
}
.l { left: 0; }
.r { right: 0; }
.m {
margin: 0 33%;
min-height: 100%;
background: lightblue;
}
Also check this JSFiddle.
You could use the position: fixed in css. My solution makes the body scrollable. If one would refresh the page, it would hop back to where they were, not sure if the overflow-method does that. Also, this allows you to user anchors to parts of you content ()
This is a quick draft:
<div id="divWrap">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
.
/* This wrapper places content centered in the page, the relative is important */
#divWrap{
position: relative;
margin: 0 auto;
width: 500px;
}
/* Place this one fixed, top, left */
#div1{
position: fixed;
left: 0;
top: 0;
width: 100px;
}
/* This div acts normal */
#div2{
margin: 0 100px 0 200px; /* margins => the widths of 1 & 2 */
width: 200px;
}
/* Place this one fixed, top, right */
#div3{
position: fixed;
right: 0;
top: 0;
width: 200px;
}
hmm do you mean so div1 and div3 are fixed on the page, meaning that when you scroll only div2 is scrolled? if so, something like
HTML
<div class="container">
<div class="div-one"></div>
<div class="div-two"></div>
<div class="div-thee"></div>
</div>
CSS
.container { position: relative; }
.div-one, .div-two { position: fixed; }
This won't work right off the bat but you get the idea.
I need create element, that cover whole page except 20px margin on all sides. I try this and it works in webkit browsers and Firefox, but Internet Explorer (10) and Opera have problem with this :-( . Any idea how to solve this?
HTML
<div id="first">
<div id="second">
Hello world!
</div>
</div>
CSS
head, body
{
width: 100%;
height: 100%;
}
body
{
position: absolute;
margin: 0;
background-color: blue;
display: table;
}
#first
{
display: table-cell;
height: 100%;
width: 100%;
padding: 20px;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
I'd suggest:
#first {
display: table-cell;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
Which will position the element 20px away from each of the sides. However I'd suggest not using display: table-cell; since that requires a parent element to have display: table-row which itself then requires a parent element with display: table.
Also, it looks like you're trying to emulate table-based layouts, if you could list the overall problem you're trying to solve you may get better/more useful answers.
Try a solution like this:
http://jsfiddle.net/cyHmD/
Never use position:absolute and display:table on body - leave those properties as they are since body is your base from where you build the rest of the site - at most use position:relative on body tag. box-sizing changes how the browser box model is calculated - for example instead of calculating 100% width + 20% padding + 20% border = 140% it calculates as 100% width + 20% padding + 20% border = 100%.
This solution will work from IE7 on including IE7.
head, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
background-color: blue;
}
#first
{
position:absolute;
width:100%;
height:100%;
padding:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
How about this? Simply replace required margin with border:
#first
{
display: table-cell;
height: 100%;
width: 100%;
border: 20px solid blue;
background-color: white;
}