I have 3 divs that I want next to each other on my page. If the container is 700px in width, they all connect well. But I want to have a max width of 800px on my container. And in that case, I want all my divs to space out (1st div to the left, 2nd div in the center and 3rd div on the right). I need to connect those divs with 2 spacers that I've got (1 to connect div 1 and 2. The other to connect 2 and 3).
Once I have achieved that, I want a second div (content) to float above the first div (background). But I have already achieved that.
I have tried a few things, but I can't find a solution, if anyone could help me, I would appreciate it!
Here are my code snippet:
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
margin: 0 auto;
background: #efefef;
height: 800px;
}
.content {
position: relative;
z-index: 100;
top: 0;
}
.background {
position: absolute;
z-index: 0;
top: 0;
width: inherit;
}
.bg-left {
height: 190px;
width: 268px;
background: url(images/left-1.png);
float: left;
}
.bg-left-spacer {
height: 190px;
width: 1px;
background: url(images/left-spacer.png);
float: left;
}
.bg-connector {
height: 190px;
width: 133px;
background: url(images/connector.png);
float: left;
margin: 0 auto;
}
.bg-right-spacer {
height: 190px;
min-width: 1px;
background: url(images/right-spacer.png);
float: left;
background-repeat: repeat-x;
}
.bg-right {
height: 190px;
width: 297px;
background: url(images/right-1.png);
float: left;
}
<div class='container'>
<div class='content'>
<h1>testheader</h1>
<p>testtext</p>
</div>
<div class='background'>
<div class='bg-left'></div>
<div class='bg-left-spacer'></div>
<div class='bg-connector'></div>
<div class='bg-right-spacer'></div>
<div class='bg-right'></div>
</div>
</div>
You could achieve it like this:
JSFiddle - DEMO
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
min-width: 700px;
max-width: 800px;
margin: 0 auto;
background: #efefef;
height: 800px;
}
.content {
position: relative;
z-index: 100;
top: 0;
}
.background {
position: absolute;
width: 100%;
z-index: 0;
top: 0;
display: table;
table-layout: fixed;
}
.bg-left {
height: 190px;
width: 268px;
background: url(images/left-1.png);
border: 1px solid #000;
display: table-cell;
}
.bg-connector {
height: 190px;
width: 133px;
background: url(images/connector.png);
border: 1px solid #000;
display: table-cell;
}
.bg-right {
height: 190px;
width: 297px;
background: url(images/right-1.png);
border: 1px solid #000;
display: table-cell;
}
.space {
display: table-cell;
width: 100%;
height: 190px;
background: #F00;
}
<div class='container'>
<div class='content'>
<h1>testheader</h1>
<p>testtext</p>
</div>
<div class='background'>
<div class='bg-left'></div>
<div class="space"></div>
<div class='bg-connector'></div>
<div class="space"></div>
<div class='bg-right'></div>
</div>
</div>
You should use percantages to achieve that:
.bg-left {
height: 190px;
width: calc( 100% / 3 - 1px );
background: url(images/left-1.png);
}
This way .bg-left is 33.3% in width -1px for the spacer.
DEMO: http://jsfiddle.net/6aor5u4m/
Related
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
So I have this fixed header which has z-index:10, below that a fixed banner and then below that a relative content container. What I want is that the content scrolls over the banner but under the header. However, when I try to scroll it doesn't work. The strange part to me is that whenever I add box-shadow: 0px 0px 2px rgb(100,100,125); to the content container it does do what I want. I'm using the following code:
* {
padding: 0;
margin: 0 auto;
}
body {
background: rgb(223,227,238);
text-align: center;
}
#body_container {
padding-top: 80px;
}
#banner_container {
position: fixed;
left: 0;
right: 0;
}
#banner {
width: 1024px;
height: 300px;
}
#content_container {
background: rgb(243,247,248);
max-width: 1024px;
height: 100%;
position: relative;
top: 300px;
box-shadow: 0px 0px 2px rgb(100,100,125);
}
header {
min-width: 100%;
background: rgb(50,50,50);
height: 80px;
position: fixed;
z-index: 10;
}
/* Header styling, not relevant */
#header_container {
max-width: 1024px;
height: 100%;
}
#header_container div {
float: left;
display: inline-block;
width: 25%;
}
#logo {
width: 50%;
height: auto;
}
.menuItem {
padding-top: 29px;
height: calc(100% - 29px);
border: 0;
text-align: center;
font-family: Signika;
font-size: 25px;
color: rgb(203,207,218);
}
.menuItem:hover {
border-bottom: 4px solid rgb(59,89,202);
height: calc(100% - 33px);
color: rgb(160,170,218);
}
.menuLogo {
padding-top: 14.5px;
height: calc(100% - 14.5px);
border: 0;
text-align: center;
}
#mobile_menu_button {
display: none;
}
<header>
<div id="header_container">
<div class="menuLogo">
<img id="logo" src="img/desygn%20logo%20website.png">
</div>
<div class="menuItem">Home</div>
<div class="menuItem">Over</div>
<div class="menuItem">Contact</div>
<div id="mobile_menu_button">
</div>
</div>
</header>
<div id="body_container">
<div id="banner_container">
<img id="banner" src="img/banner_website.png">
</div>
<div id="content_container">
</div>
</div>
In your code you've not added any content under content_container. I don't see any issue with your code. It is working fine. Check here with content
I have created a two column layout. Here is the jsfiddle.net . My issue is that I want the line in the center with a 10px width to have 100% height. I have created a container div with the id #obal (height: auto). If I set #cara .inner's height to 100%, the center line disappears. What do I have change?
Thanks for reply.
The issue here seems to be that when you set #cara . inner height to 100% it takes the full height of it's parent container - #cara that in this case is 0px;
The solution may look like this:
#obal {
margin: 10px;
height: 200px;
}
#obal #cara {
position: relative;
float: left;
left: -20px;
height: 100%;
}
#cara .inner {
position: absolute;
height: 100%;
width: 10px;
float: left;
background: #336;
}
div#prvni {
float: left;
margin: 0px 30px;
width: 120px;
height: 100px;
background: #ff3322;
font-size: 0.95rem;
overflow: hidden;
}
div#prvni .inner, div#druhy .inner{
padding: 10px;
}
div#druhy {
width: 120px;
height: auto;
background: #393;
font-size: 1rem;
overflow: hidden;
float: left;
}
<div id="obal">
<div id="prvni">
<div class="inner">Prvni cast text neni sice nejsilnejsi, ale spisovatel se snazi popsat dulezite body jeho navstevy
</div>
</div>
<div id="cara">
<div class="inner"></div>
</div>
<div id="druhy">
<div class="inner">Druha cast mluvila hlavne o velkych problemech na startu, kdy se vsichni ucastnici nestihnuli pripravit a pote nasledovat zmatek. Jenze kazdy chtel vyhrat, tak to nevzdal <br> NIKDY :-)
</div>
</div>
</div>
Hope this helps.
http://jsfiddle.net/oapu11q4/20/
===================== CSS ===================
#obal {
display: table;
height: auto;
margin: 10px;
}
div#prvni {
background: none repeat scroll 0 0 #ff3322;
display: table-cell;
font-size: 0.95rem;
height: 100%;
width: 120px;
}
#obal #cara {
background: none repeat scroll 0 0 #336;
display: table-cell;
}
#cara .inner {
width: 10px;
}
div#druhy {
background: none repeat scroll 0 0 #393;
display: table-cell;
font-size: 1rem;
height: 100%;
width: 120px;
}
div#prvni .inner, div#druhy .inner {
padding: 10px;
}
===================== HTML =============================
<div id="obal">
<div id="prvni">
<div class="inner">Prvni cast text neni sice nejsilnejsi, ale spisovatel se snazi popsat dulezite body jeho navstevy
</div>
</div>
<div id="cara">
<div class="inner"></div>
</div>
<div id="druhy">
<div class="inner">Druha cast mluvila hlavne o velkych problemech na startu, kdy se vsichni ucastnici nestihnuli pripravit a pote nasledovat zmatek. Jenze kazdy chtel vyhrat, tak to nevzdal <br> NIKDY :-)
</div>
</div>
</div>
You can set the height to 100vh
Using #obal as a reference for #cara relative height:
#obal {
margin: 10px;
position: relative; overflow: hidden;
}
#cara {
float: left;
margin-left: -20px;
}
#cara .inner {
position: absolute;
width: 10px; height: 100%;
background: #336;
}
(...)
From the specification:
The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'.
Using an overflow: hidden to cut the line with a huge height:
#obal {
margin: 10px;
overflow: hidden;
}
#cara {
float: left;
position: relative; right: 20px;
}
#cara .inner {
position: absolute; top: 0; left: 0;
width: 10px; height: 10000px;
background: #336;
}
(...)
Using flex:
#obal {
margin: 10px;
display: flex;
}
#prvni, #druhy {
display: table;
}
Try this:
http://jsfiddle.net/Ls6sqz2n/
You'd needed to add height: 100%; to the element ancestors, including html and body:
html, body {
height: 100%;
}
#obal {
margin: 10px;
height: 200px;
height: 100%;
}
#cara {
position: relative;
width: 10px;
height: 100%;
float: left;
}
#cara .inner {
position: absolute;
right: 15px;
height: 100%;
width: 10px;
background: #336;
}
(...)
I am currently trying to fit an image into a div container, but it doesnt work. I have got a complex div-tree on my page, that looks like this:
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
And the following CSS:
#a {
height: 300px;
background-color: red;
position: relative;
text-align: center;
}
#b {
height: 100%;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding: 20px;
}
#c {
width: auto;
height: auto;
display: inline-block;
max-height: 100%;
background-color: black;
padding: 20px;
}
#d {
width: 400px;
background-color:yellow;
max-height: inherit;
}
img {
max-width: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: calc(100% - 80px);
margin: auto;
}
I want the image to be fitted into the blue container. It should also take care on the given div containers. Currently the black one does not fill till the end plus padding of the container.
Demo Fiddle
I hope someone is able to help.
Here is a new concept for you. box-sizing: border-box incorporates the padding into the percentage width and heights automatically. The image no longer needs position: absolute.
The width and height of all the inner divs are controlled by the width on the #a container and their padding.
New Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#a {
background-color: red;
position: relative;
text-align: center;
width: 400px;
padding: 20px;
}
#b {
background: blue;
padding: 20px;
}
#c {
background-color: black;
padding: 20px;
}
#d {
background-color: yellow;
padding: 20px;
}
img {
width: 100%;
display: block; /* remove inline gap */
}
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
Old Answer
Remove width: auto; height: auto; and padding: 20px on #c
Place height: 100% on #c
Reason this happens - The height: 100% of #c is affected by the padding on #b so any extra padding will blow up the height.
Demo
#a {
height: 300px;
background-color: red;
position: relative;
text-align: center;
}
#b {
height: 100%;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding: 20px;
}
#c {
height: 100%;
display: inline-block;
background-color: black;
}
#d {
width: 400px;
background-color:yellow;
max-height: 100%;
}
img {
max-width: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: calc(100% - 80px);
margin: auto;
}
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
Here And try giving " #d" a height
#d > img {
width: 100%;
height: 100%;
text-align:center;
}
Hi i has created this simple design:
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 11%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
But when I see the result, the divs which are in the term div have some space between each other. Setting the padding and margin to zero doesn't remove the space.
What should I do to remove the space to set the divs exactly near to each other?
One solution is to use in term container display: flex:
body {
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel {
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio {
width: 100%;
height: 11%;
background-color: red;
}
#term {
width: 100%;
height: 11%;
background-color: blue;
display: flex;/*Add display flex*/
}
#content {
width: 100%;
height: 67%;
background-color: green;
}
#footer {
width: 100%;
height: 11%;
background-color: pink;
}
.term {
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child {
margin-left: 0;
}
.term:last-child {
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
Reference
flex
the problem is that Inline-block have some default spaces ,
use Float to left better than Inline-block and use a clearfix class :
#term{
width: 100%;
height: 11%;
background-color: blue;
**overflow: hidden;**
}
.term{
background-color: black;
height: 100%;
width: 25%;
**float : left ;**
border-right: solid red;
}
http://jsfiddle.net/n0zxmgoy/
As stated earlier, any white space between inline blocks is retained in the layout, so one way
of getting rid of it is to make sure that the inline block elements have no intervening space
in the HTML mark-up.
Also, you need to set a reference height so that the height percentage values work as expected.
I did this by adding height: 100% to the html and body tags.
Also, make sure to add a height value to the #header element, which makes the arithmetic
a bit easier to deal with.
A subtle point involves the right border on the .term elements. You can either use the
CSS calc value or box-sizing: border-box, you can try either.
html, body {
height: 100%; /* this may be needed... */
}
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#header {
width: 100%;
height: 22%;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 50%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: calc(25% - 2px);
/* box-sizing: border-box; optional alternative */
display: inline-block;
border-right: 2px solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
width: 25%; /* you need to consider this... */
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div><div class="term"></div><div class="term"></div><div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>