This question already has answers here:
How to create equal height columns in pure CSS [duplicate]
(2 answers)
Closed 8 years ago.
I want to use a simple layout, sidebar, subsidebar and the main content, all columns need to be the same in height. Here's when I get stuk, the columns need to be min- screen height if they are empty, and if 1 column has an element/content the other columns need to be the same height.
// het idea
<div id="container">
needs to be min-heigth 100%
<div id="sidebar">
needs to be 40px width
</div>
<div id="subsidebar">
needs to be 200px width
</div>
<div id="content">
needs to be 100% width
<div class="some-element-is-3000">
3000px height(example)
</div>
</div>
</div>
Try the below fiddle.It uses display:table; and display:table-cell;:
CSS
html,body,#container{
width:100%;
height:100%;
}
#container{
display:table;
}
#sidebar,#subsidebar,#content{
border:1px solid black;
display:table-cell;
}
#sidebar{
min-width:40px;
}
#subsidebar{
min-width:200px;
}
#content{
width:100%;
}
Fiddle with all three divs with less contents Fiddle
Fiddle with content div exceeding window height Fiddle
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
If I create a 30% wide div, inline-block next to a 70% wide div, they don't line up horizontally. I have to make them add up to less than 100%
html
<div id="wrapper">
<div id="w30">
width 30%
</div>
<div id="w70">
width 70%
</div>
</div>
css
#wrapper{
width:100%;
}
#w30{
background:yellow;
display:inline-block;
width:30%;
}
#w70{
background:pink;
display:inline-block;
width:70%;
}
jsfiddle
why is 30% + 70% seem to be wider than 100% ?
You are using inline-block, that calculates white spaces too. So either have your div elements on the same line or use something modern such as flexbox.
With inline-block (same CSS as you're using now):
<div id="wrapper">
<div id="w30">
width 30%
</div><div id="w70">
width 70%
</div>
</div>
With flexbox (same HTML as you're using now):
#wrapper{
display:flex;
width:100%;
}
#w30{
background:yellow;
width:30%;
}
#w70{
background:pink;
width:70%;
}
<div id="wrapper">
<div id="w30">
width 30%
</div>
<div id="w70">
width 70%
</div>
</div>
This question already has answers here:
How to set the margin or padding as percentage of height of parent container?
(9 answers)
Closed 7 years ago.
I have very simple markup and style rules that should put my div in the middle of the page, but it does not (actually, the top of the div would be at the middle, not 100% truly centered vertically) when the viewport is of a small enough height.
HTML:
<div>adf</div>
CSS:
div {
background-color:red;
margin-top:50%;
}
You can look at my Fiddle to see this. It will require you shrink the rendered window (bottom right) a bit, as it is correct initially.
Instead of 50% try 50vh
50% doesn't do what you think it would - it actually uses the width of the parent container, not the height to calculate.
Try replacing percentages with vh
div {
background-color:red;
margin-top:50vh;
}
<div>adf</div>
Here are more cool stuff about viewport sized measures
Here is another solution:
http://jsfiddle.net/nb6pq14v/
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
background: #abc;
height: 25px;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
</div>
</div>
</div>
This question already has answers here:
CSS: How can I set image size relative to parent height?
(7 answers)
Closed 8 years ago.
How to restrict the height of an image to its parent container whose height is specified in terms of percentages?
I want the image to span over the parent if image width/height > parent width/height.
and image to be center aligned to parent if image width/height < parent width/height.
In any case I dont want the image to be stretched[vertically/horizontall.]
html, body{
width:100%;
height:100%;
}
#top{
height:10%;
}
#middle{
height:80%;
}
#bottom{
height:10%;
}
img{
width: how much?
height: how much?
}
<html>
<body>
<div id="top">I am top</div>
<div id="middle">
<img src="/images/abc.jpg" />
</div>
<div id="bottom">I am bottom</div>
</body>
</html>
height: 100%;
width: auto;
Just define the image height as a percentage, auto width will keep it in proportion.
This question already has answers here:
Three-column variable width CSS page layout, centre column expands
(2 answers)
Closed 8 years ago.
I'm stuck with a problem. How to make full screen layout, where left and right columns are fixed width (for example 250px), but middle column is fluid. My page must be always be full screen!
I want something like this:
You can achieve this using a bit simple logic of CSS.
You have to create 3 different styles which can take care of Left content, middle content and right content. Here you go :
#fixed_width {
width:96px;
padding:2px;
border:1px solid #000;
float:left;
background-color:#f00;
}
#fixed_width_right {
width:96px;
padding:2px;
border:1px solid #000;
float:right;
background-color:#f00;
}
#unfixed_width {
padding:2px;
margin-left:105px;
border:1px solid #000;
background-color:#090;
}
Use this CSS styles in your HTML code like below :
<div id="container">
<div id="fixed_width">col 1, 80 pixels </div>
<div id="fixed_width_right">col 3, 80 pixels </div>``
<div id="unfixed_width">col 2, wild card </div>
</div>
And you are done :)
Cheers..!!
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 years ago.
Here's my situation: I'm trying to make a page with two DIVsfilling whole page (height 100%, width 50% each). Also, the content in the DIVs is to be vertically aligned to middle.
Is there an easy way to achieve this without hacks or javascript?
I've tried body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}
but that doesn't work...and with that code, i have to specify width in pixels instead of percentage
Live Demo
I just made a jsFiddle showing my suggestion to a solution. Here I take into account that you want two <div>s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solution with source code.
HTML
<div id="outer">
<div id="table-container">
<div id="table-cell">
This content is vertically centered.
</div>
</div>
</div>
CSS
#outer {
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
}
#table-container {
height:100%;
width:100%;
display:table;
}
#table-cell {
vertical-align:middle;
height:100%;
display:table-cell;
border:1px solid #000;
}
For reference, I used this tutorial.
position: absolute;
top: 0;
bottom: 0;
Will give you a box that fills to 100% height. Make sure your HTML and BODY tags are large enough:
html, body {
height: 100%;
}
Do you want this type of design ? => Example Fiddle