I'm having the issue that I want my container to have width 950px if possible - but if the window is resized then it will reduce down to the size of the window accordingly, currently if the window is resized it requires horizontal scrolling to see entire wrapper & container - what am I missing?
.wrapper {
max-width: 950px;
margin-right: 32px;
}
.container {
background-color: teal;
padding: 48px 64px 48px 64px;
border: 1px solid grey;
width: 100%;
min-height: 414px;
}
<div class="wrapper">
<div class="container"></div>
</div>
Add box-sizing: border-box; to include the padding in the width, otherwise it will be added to the 100%, therefore exceeding the parent width.
.wrapper {
max-width: 950px;
margin-right: 32px;
}
.container {
box-sizing: border-box;
background-color: teal;
padding: 48px 64px 48px 64px;
border: 1px solid grey;
width: 100%;
min-height: 414px;
}
<div class="wrapper">
<div class="container"></div>
</div>
You need to combine %-based width and pixel-based max-width for that, try this:
.wrapper {
width: 90%;
max-width: 950px;
margin: 0 5%;
}
Related
I have a container and children elements. The container is positioned fixed with 10% height. Each child element must have 100% height and width equal to its height - this gets even more complicated when I add that my container is expanding horizontally not vertically. I would like to ask if this is possible using CSS because with JavaScript it could be easily achieved but I'd have to listen for window resizes which is a pain and I would like to avoid that.
.container {
width: 200px;
height: 10%;
border: solid 1px black;
position: fixed;
top: 0;
left: 0;
white-space: nowrap;
overflow: auto;
}
.container > div {
display: inline-block;
height: 100%;
width: 50px;
border-radius: 50%;
border: solid 1px black;
}
https://jsfiddle.net/fdtajx3k/1/
The following might do the trick for you.
On your child div elements, use viewport units vh for both the width
and height values.
Also, add some bottom padding (optional) on your parent container if the scroll bar is an issue.
Reference: https://www.w3.org/TR/css3-values/#viewport-relative-lengths
html,
body {
height: 100%;
}
.container {
width: 200px;
height: 10%;
border: solid 1px black;
position: fixed;
top: 0;
left: 0;
white-space: nowrap;
overflow: auto;
padding-bottom: 30px;
}
.container > div {
display: inline-block;
height: 10vh;
width: 10vh;
border-radius: 50%;
border: solid 1px black;
box-sizing: border-box;
}
<div class=container>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
I have a div inside another div. The outer div has a given width, but max-width should be 100%. The inner div is resizable but somehow the outer div doesn't seem to care whether or not the inner div gets wider. A scrollbar is displayed instead of sizing with the inner box to a maximum of 100%.
This fiddle demonstrates the issue; how can I have a div with a given width in px, set the inner div to resizable and have the outer div listen to the inner div's current width and size up to a maximum of 100%?
JSFiddle with the example
HTML
<div id="outer">
<div id="inner">resize me...</div>
</div>
CSS
#outer {
overflow: auto;
width: 200px;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
resize: both;}
Add the following CSS (or replace it):
#outer {
display: inline-block;
width: auto;
}
#inner {
width: 200px;
}
Live preview: JSFiddle
You should remove "width: 200px;" and add "float: left;" to "#outer"
Here is the code:
#outer {
overflow: auto;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
float: left;
}
see if this helps.
body {
padding: 0;
margin: 0;
}
#outer {
/* min-width: 200px;*/
/* max-width: 100%; */
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
display: inline-block;
box-sizing: border-box;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
max-width: 100%;
resize: both;
}
<div id="outer">
<div id="inner">resize me...</div>
</div>
I have a div positioned absolutely with a height: 100vh. It has also a shadow. No I would like to give it a 20px margin bottom in order to see the bottom shadow. Is that possible? any trick?
jsfiddle
<div class="container"><div class="aux"></div></div>
body {
margin: 0;
}
.container {
width: 300px;
height: 100vh;
background: yellow;
margin-bottom: 100px;
box-shadow: red 10px 10px 10px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
position: absolute;
}
you can use calc() and subtract 20px from height
height: calc(100vh - 20px);
Another approach, without using calc() but changing the markup, is to introduce an inner container, like so
<div class="container">
<div class="inner">
...
</div>
</div>
and this css
.container {
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
width: 300px;
height: 100vh;
padding : 0 20px 20px 0; /* we create room for the box shadow inside the
container. Padding is included in the height
due to the box-sizing property
*/
}
.inner {
width: 100%;
height: 100%;
background: yellow;
box-shadow: red 10px 10px 10px;
}
Example: http://jsfiddle.net/sp9bh/2/
[1]: http://caniuse.com/#feat=calc
Why not just add 20px to the bottom margin?
margin-bottom: 120px;
I have a centered div whose height depends on the user screen resolution ( div1 ). I would like to automatically position a second div ( div2 ) exactly under it ( again in the center ), preferably without the use of either calculations/javascript or the use of a wrapping table
<div id="div1" class="div1"></div>
<div id="div2" class="div2"><input type=image src=bla.jpg></div>
css:
.div1 {
position: absolute;
overflow: hidden;
top: 10px;
left: 0px;
right: 0px;
width: 50%;
height: 65%;
min-width: 100px;
min-height: 200px;
max-width: 200px;
max-height: 300px;
background-color: red;
border: 1px solid #000000;
margin: 0 auto;
}
.div2 {
position: relative;
display: table;
overflow: hidden;
top: 200px;
border: 1px solid #000000;
padding: 0px;
margin: 0 auto;
background-color: yellow;
visibility: visible;
}
not working jsfiddle : http://jsfiddle.net/Y4kga/
the yellow div should be exactly ( touching ) under the red div
p.s. i'm using display: table because i have insite input type=image and i want the width the be as big as the input type.
How should i do this ?
thanks in advance!
Remove the absolute positioning from your div1 and add it to a wrapper div. Then the browser's layout engine can take care of positioning the yellow div beneath your red div.
<div class="wrapper">
<div id="div1" class="div1"></div>
<div id="div2" class="div2">lol</div>
</div>
Since div1 is no longer absolutely positioned, you can horizontally center using auto-margins.
.div1 {
margin: 0px auto;
margin-top: 10px;
}
http://jsfiddle.net/Y4kga/3/
Well, don't position your first div has absolute --> http://jsfiddle.net/tPJNg/1/
.div1 {
overflow: hidden;
width: 50%;
height: 65%;
min-width: 100px;
min-height: 200px;
max-width: 200px;
max-height: 300px;
background-color: red;
border: 1px solid #000000;
margin: 10px auto;
clear:both;
}
.div2 {
clear:both;
display: table;
overflow: hidden;
border: 1px solid #000000;
padding: 0px;
margin: 0 auto;
background-color: yellow;
visibility: visible;
}
That's it.
I am trying to create a webdesign with a full width fixed menu, a full width header, 960px wide centered content with 3 columns (each with the height of 100%) and a full width sticky footer.
In all working examples I have seen header, content and footer is the same width.
(edited) My problem is to make the columns stretch to full height of the screen, from the bottom of the header to the top of the footer, at any screen size.
I have made an example of what I am trying to achieve: http://muku.dk/example.jpg
Is this possible with CSS?
Something like this. Please note that this is just to guide you to the right direction. You have to stick in there youself the equal height columns by using any technique and also the sticky footer.
The Markup
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Goes Here</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="wrapper">
<div id="my_menu">
<p>fixed menu width 100%</p>
</div>
<div id="container">
<div id="my_header">
<p>header width 100%</p>
</div>
<div id="content">
<div id="col1">
<p>column 1 width 320px height 100%</p>
</div>
<div id="col2">
<p>column 2 width 320px height 100%</p>
</div>
<div id="col3">
<p>column 3 width 320px height 100%</p>
</div>
</div>
<div id="my_footer">
<p>sticky footer width 100%</p>
</div>
</div>
</div>
</body>
</html>
The Style
*
{
padding: 0;
margin: 0;
}
html, body
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}
div#wrapper
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}
div#my_menu
{
width: 100%;
min-width: 100%;
height: 50px;
border: 1px solid black;
background-color: grey;
position: fixed;
}
div#my_menu>p
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
font-size: 50px;
line-height: 50px;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}
div#container
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
padding-top: 50px;
}
div#my_header
{
width: 100%;
min-width: 100%;
height: 100px;
border: 1px solid black;
background-color: yellow;
}
div#my_header>p
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
font-size: 100px;
line-height: 100px;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}
div#content
{
width: 960px;
margin: 0 auto;
height: 100%;
min-height: 100%;
border: 1px solid black;
background-color: blue;
overflow: auto;
}
div#col1
{
width: 320px;
height: 100%;
min-height: 100%;
outline: 1px solid black;
background-color: green;
float: left;
}
div#col1>p
{
width: 100%;
min-width: 100%;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}
div#col2
{
width: 320px;
height: 100%;
min-height: 100%;
outline: 1px solid black;
background-color: orange;
float: left;
}
div#col2>p
{
width: 100%;
min-width: 100%;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}
div#col3
{
width: 320px;
height: 100%;
min-height: 100%;
outline: 1px solid black;
background-color: gold;
float: left;
}
div#col3>p
{
width: 100%;
min-width: 100%;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}
div#my_footer
{
width: 100%;
min-width: 100%;
height: 80px;
border: 1px solid black;
background-color: pink;
}
div#my_footer>p
{
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
font-size: 80px;
line-height: 80px;
font-weight: bold;
text-transform: uppercase;
color: red;
text-align: center;
}
EDIT 1
Try this. This works perfect. The Footer sticks to the bottom even when there is not enough content and pushed down when there is more content. Also the verticaly Scroolbar does not appear. Now please don't ask me to make the columns equal height as well.
The HTML Markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body id="index">
<div id="wrapper">
<div id="my_menu">
FIXED MENU WIDTH 100%
</div>
<div id="my_header">
HEADER WIDTH 100%
</div>
<div id="content">
<p>CONTENT 960px</p>
<div id="col1" class="content_columns">
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
</div>
<div id="col2" class="content_columns">
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
</div>
<div id="col3" class="content_columns">
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
</div>
<div class="clear_floats"></div> <!-- For Clearing Floats -->
</div>
<div class="push"></div> <!-- For Sticky Footer -->
</div>
<div id="my_footer">
STICKY FOOTER WIDTH 100%
</div>
</body>
</html>
The Style CSS
* /* For CSS Reset */
{
padding: 0;
margin: 0;
}
html, body
{
width: 100%;
height: 100%;
}
div#wrapper
{
width: 100%;
height: 100%;
min-height: 100%; /* For Sticky Footer */
height: auto !important; /* For Sticky Footer */
margin: 0 auto -70px; /* For Sticky Footer */
}
div#my_menu
{
width: 100%;
height: 50px;
outline: 1px solid black;
background-color: grey;
text-align: center;
position: fixed;
}
div#my_header
{
width: 100%;
height: 100px;
outline: 1px solid black;
background-color: yellow;
text-align: center;
padding-top: 50px;
}
div#content
{
width: 960px;
margin: 0 auto;
outline: 1px solid black;
background-color: brown;
text-align: center;
}
div.content_columns
{
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
float: left;
}
div.clear_floats /* For Clearing Floats */
{
clear: both;
}
div#my_footer
{
width: 100%;
height: 70px;
outline: 1px solid black;
background-color: pink;
text-align: center;
}
div.push /* For Sticky Footer */
{
height: 70px;
}
Hope this helps.
Yes, what have you tried? This is very basic.
You need to put the 3 columns in a wrapper ( or something else) and the header, fixed nav and footer outside the wrapper. Now, you can make the nav, header and footer 100% width and the wrapper 960px.