I am having some trouble understanding why some of my DIVs are not expanding to my "content" DIV's height. It has to be css/html only.
VISUAL IMAGE (IMGUR)
HIERARCHY
-[+]wrapper
----[-]left (will contain navigation bar)
----[-]right (used just to center the "center" div, may have content)
----[-]center (center of page containing content)
--------[o]header (will only have small line of text)
--------[o]content (when height overflows, it should expand all other heights)
----[-]footer (resource & contact links, should always be at the bottom)
CSS
*{
font-family: Arial Black,Arial Bold,Gadget,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 400;
border:0px;
margin:0px;
padding:0px;
}
.wrapper{
position:absolute;
width:100%;
height:100%;
background-color:black;
}
.left{
position:absolute;
left:0px;
width:220px;
height:100%;
background-color:red;
}
.right{
position:absolute;
right:0px;
width:220px;
height:100%;
background-color:blue;
}
.center{
position:absolute;
right:220px;
left:220px;
background-color:yellow;
}
#header{
float:left;
height:40px;
width:100%;
background-color:silver;
}
#footer{
position:absolute;
bottom:0px;
height:20px;
width:100%;
background-color:silver;
}
#content{
float:left;
top:40px;
bottom:20px;
margin:20px;
background-color:orange;
}
HTML
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
<div class="center">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Here is my jfiddle: JFIDDLE
you set .wrapper div's position:absolute, and height 100%;,so it only take the height of container in which he is,(that's how absolutely positioned elements work)
the problem is i think you are over-using absolute positions a little bit,see its a powerful tool but not that good for layout compositions , you can use either the float base layout, or in-line blocks or flex layouts
flex will work like
.wrapper {
display: flex;
}
.left {
flex-grow: 1
}
.right {
flex-grow: 1
}
.content {
flex-grow: 3
}
but you have to put footer out of the wrapper or you can add an other child div like
<div class="wrapper">
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<div>
<div id="footer"></div>
</div>
now just add the flex property to main, and flex grow to childrens
remember flex work on rations , the above css means the .contnet dive will take 3 times the width of .lef or .right div
i.e 20% width for left, 20% width for right, 60% width for center,
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor</div>
<div class="col">Lorem ipsum dolor sit amet</div>
</div>
Refer this link you will get the solution for it or if you don't want to use css then go for Javascript. Refer this jquery plugin for that purpose - jquery-match-height
Related
I have problems placing a div within another div which has a defined height of lets say 400px.
When i set the inner div to 100% then its overlapping the outer div and goes over the outer one. Why isnt 100% height sizing the inner div to the outer divs height?
body {
min-width:300px;
}
.header {
background-color:pink;
width:100%;
height:400px;
}
.menu {
background-color: red;
}
.header-container {
color:white;
background-color:gray;
height:100%;
max-width:400px;
margin:auto;
}
.headline {
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
.clearfix {
clear:both;
}
<div class="header">
<div class="menu">
menu
</div>
<div class="header-container clearfix">
<div class="headline">
<span>das ist mein blog</span>
<span>this is the underline</span>
</div>
</div>
</div>
<div class="blog">
y
</div>
<div class="footer">
x
</div>
https://jsfiddle.net/g9ec4nw8/
Because the the padding on the .header-container is causing an overflow.
Adding box-sizing: border-box; to your .header-container, will fix the box-sizing issue.
But not only that, you haven't taken into account the 18px of height by your .menu.
In full, by changing your .header-container to the following code:
.header-container {
color:white;
background-color:gray;
height:calc(100% - 18px);
max-width:400px;
box-sizing: border-box;
margin:auto;
top:0;
bottom:0;
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
Will fix the issue.
Fiddle Here.
I have some child divs placed in a parent div. It looks like that:
Now I need to place an image with a relative size into the red(brown) div.
But every time when I place the image into the div the layouts expands.
And that is a problem for me.
So how can I put an image with a relative size into my div without expanding the div layout?
HTML:
<div class="textContentContainer">
<div class="FirstSectionContentHeader">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="FirstSectionHeaderintroText uppercase">
SOME TEXT
</div>
</td></tr></table>
</div>
<div class="FirstSectionLogoArea">
<img src="../img/Headerlogo.png" alt="Description" class="FirstSectionTitleLogo">
</div>
<div class="FirstSectionIntroText usualText">
ddd
</div>
<div class="FirstSectionBottomLayout">
<img src="../img/basics/Pfeil.png" alt="Pfeil" class="FirstSectionBottomArrow">
</div>
</div>
CSS
.FirstSectionContentHeader{
height:10%;
width: 100%;
font-weight:200;
text-align:center;
background-color: aqua;
}
.FirstSectionLogoArea{
height:10%;
width:100%;
background-color: chartreuse;
}
.FirstSectionTitleLogo{
height:80%;
width:100%;
object-fit:contain;
}
.FirstSectionIntroText {
height:70%;
width:100%;
background-color:white;
}
.FirstSectionBottomLayout{
height:10%;
width:100%;
background-color: brown;
}
.FirstSectionBottomArrow {
height:10%;
width:10%;
object-fit:scale-down;
}
the image has position: staticby default, which is "inserted" in the parent element and "takes some space" there, causing the parent element to become larger. You can give it position: absolute(which requires that the parent element has position: relative) and still use percentage values.
I have a two column layout with one fixed column and one column of variable size with a min-width and a max-width. The columns should be flush with each other so there is no space.
An image of what I'm looking for http://imgur.com/RQXXaoz
Here's what I tried
JsFiddle: http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
The problem I'm having is that my variable width column will not grow to it's max-width and is stuck at the width determined by its content.
You can use display table and table-cell to achieve this. Another difference is to discard max-width and go for just width instead.
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
UPDATE
After discussing in the comments, I believe you actually have a limit for both columns width, one being 400px and the other, 800px.
Something like this:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
Is this what you are looking for?
https://jsfiddle.net/retr0ron/
What I've done here is rearranged your content in the HTML-document (notice that there can't be whitespace between the divs where I removed it, otherwise you will see a small gap between them (because of how inline-elements behave).
HTML:
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test">
Rest with BFC
</div><div class="test2">
Fixed content
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div><div class="test2">
Fixed Content
</div>
</div>
</div>
CSS:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
I have a header that is divided into a few parts.
First, it's divided into left, and right.
The right part is then divided into stacked top and bottom, or at least that's what I'm trying to do.
However, they won't show up (unless there's text or something.)
HTML
<div id="header">
<div id="header_left">
<div id="header_title">
<p id="t1">TEXT</p>
<p id="t2">TEXT</p>
<p id="t3">TEXT</p>
</div>
</div>
<div id="header_right">
<div id="right_top">x</div>
<div id="right_bottom">x</div>
</div>
</div>
CSS
#header_right {
height:100%;
float:right;
}
#right_top {
height:140px;
width:100%;
display:block;
background-color:#FF0000;
}
#right_bottom {
height:60px;
width:100%;
display:block;
background-color:#000;
}
You have to set position:absolute for the empty div's to display
position:absolute;
You should to add this:
#header_right {
height:100%;
float:left; /*changed from right*/
}
/*added new class*/
#header_left{
float: left;
width: 97%;
}