I got a container div containing three child divs (vary in content) - each as tall as the tallest one. I managed this by setting the container to display:table and the child divs to display:table-cell etc.
Everything worked just fine, until...
I inserted a new div inside one of the child divs and tried to make it height:100% - so it would stretch to the same height as its parents, but that did not work.
Please see my JSFiddle: http://jsfiddle.net/bkG5A/
Any help would be greatly appreciated!
HTML
<div class="container">
<div class="child">
a<br />a<br />a
</div>
<div class="child">
a<br />a<br />a<br />a<br />a<br />a<br />a
</div>
<div class="child">
<div class="content">
a<br />a<br />a
</div>
</div>
</div>
CSS
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
height: 100%;
background-color: blue;
}
Another option is to set your child div to display: inline-block;
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
<div class="container">
<div class="child">
a
<br />a
<br />a
</div>
<div class="child">
a
<br />a
<br />a
<br />a
<br />a
<br />a
<br />a
</div>
<div class="child">
<div class="content">
a
<br />a
<br />a
</div>
</div>
</div>
JSFiddle Demo
You have to set the height for the parents (container and child) explicitly, here is another work-around (if you don't want to set that height explicitly):
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
position:relative;
}
.content {
position:absolute;
top:0;
bottom:0;
width:100%;
background-color: blue;
}
Fiddle
You can use this CSS:
.content {
height: 100%;
display: inline-table;
background-color: blue;
}
JSFiddle
The child can only take a height if the parent has one already set. See this exaple : Vertical Scrolling 100% height
html, body {
height: 100%;
margin: 0;
}
.header{
height: 10%;
background-color: #a8d6fe;
}
.middle {
background-color: #eba5a3;
min-height: 80%;
}
.footer {
height: 10%;
background-color: #faf2cc;
}
$(function() {
$('a[href*="#nav-"]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
html,
body {
height: 100%;
margin: 0;
}
.header {
height: 100%;
background-color: #a8d6fe;
}
.middle {
background-color: #eba5a3;
min-height: 100%;
}
.footer {
height: 100%;
background-color: #faf2cc;
}
nav {
position: fixed;
top: 10px;
left: 0px;
}
nav li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav>
<ul>
<li>
got to a
</li>
<li>
got to b
</li>
<li>
got to c
</li>
</ul>
</nav>
<div class="header" id="nav-a">
</div>
<div class="middle" id="nav-b">
</div>
<div class="footer" id="nav-c">
</div>
Related
I have 2 columns and a footer. One of the columns is much smaller in content than the other, but I need them to match so both of their background colors run all the way to the footer. It isn't a problem for the larger one, but not the other.
.links {
background:#55C5E8;
padding:1em 2.5%;
width: 30%;
float: left;
}
.rechts {
background:#FD6943;
padding:1em 2.5%;
width: 60%;
float: left;
}
.cf {
clear:both
}
/*clearfix hack*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
<div class="midden clearfix">
<div class="rechts">
<div class="sectie" id="topmodel">
<h2>ColumnA</h2>
<p><img src="img/ColumnA.jpg" />ColumnAtext</p>
<p>ColumnA Text
</div>
</div>
<div class="links">
<ul>
<li>linkA</li>
<li>linkB</li>
<li>linkC</li>
<li>linkD</li>
</ul>
</div>
</div>
<div class="footer cf">
<p>Footertext</p>
</div>
Make the midden container a flexbox container
.midden { display: flex;}
You can either flex the midden div. OR, if you want to preserve your HTML structure, you can set fixed heights on both of your children. See the CSS changes I made below.
.links {
background:#55C5E8;
padding:1em 2.5%;
width: 30%;
float: right;
height: 150px;
}
.rechts {
background:#FD6943;
padding:1em 2.5%;
width: 60%;
float: left;
height: 150px;
}
.cf {
clear:both
}
.container {
height: 100vh;
width: 100%;
}
<div class="container">
<div class="midden clearfix">
<div class="rechts">
<div class="sectie" id="topmodel">
<h2>ColumnA</h2>
<p><img src="img/ColumnA.jpg" />ColumnAtext</p>
<p>ColumnA Text
</div>
</div>
<div class="links">
<ul>
<li>linkA</li>
<li>linkB</li>
<li>linkC</li>
<li>linkD</li>
</ul>
</div>
</div>
</div>
<div class="footer cf">
<p>Footertext</p>
</div>
I am pretty bad with css, so I was wondering how I can keep my sidebar full height, even though it doesnt have full content.
This is my css:
#wrapper {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
#wrapper .sideBar {
background-color: green;
width: 200px;
margin-left: 10px;
overflow-x: hidden;
padding-top: 20px;
}
#wrapper .productsBox{
width: 250px;
margin: 3px;
}
But I get this result
However I want a result that looks like this:
Any idea how I can fix this? And I want to have a responsive view, so when a user use phone to browse it displays a decent view. Thats the reason I use the wrapper.
html:
<div id="wrapper">
<form method="get" id="sortForm">
#Html.DropDownList("sort", new SelectList(ViewBag.sortOptions,"Value","Text"), new {#class="form-control", onchange = "sortingChanged()" })
<div class="sideBar">
<strong>Search for products</strong>
<input type="text" class="searchBar" name="SearchString" value="#ViewData["CurrentFilter"]" placeholder="Search.."/>
<hr />
<h6>Price</h6>
<div>
<input type="number" class="priceRangeInput" name="minPrice" value="#ViewData["MinPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Min</span>
</div>
<div>
<input type="number" class="priceRangeInput" name="maxPrice" value="#ViewData["MaxPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Max</span>
</div>
<br />
<hr>
<h6>Types</h6>
<button type="submit" class="btn customGreen" >Set filters</button>
</form>
<br />
</div>
#{
foreach(var p in #Model)
{
<div class="productsBox">
<div class="card">
<a asp-action="Details" asp-route-id="#p.Id">
<img alt="#p.Name" class="contain" src="#p.FilePath" height="300" style="width: 100%;" />
</a>
<h3>#p.Name</h3>
<p class="price">#p.Price kr/#p.Unit</p>
<a asp-action="Details" asp-route-id="#p.Id">
<button class="customGreen">See more</button>
</a>
</div>
</div>
}
}
</div>
html, body {
height: 100%
}
html,
body {
height: 100%; /* to set height to 100% */
}
body {
margin: 0; /* to remove default margins */
}
#wrapper {
height: 100%; /* to set height to 100% */
}
#wrapper {
display: flex;
background-color: yellow;
}
.sideBar {
background-color: #000;
width: 200px;
color: #fff;
overflow-x: hidden;
padding-top: 20px;
}
.product-wrapper {
width: calc(100% - 200px); /* 100% - (sidebar width) */
}
.productsBox {
display: inline-block;
width: 150px;
height: 150px;
color: #fff;
margin: 3px;
background: #2f910f;
}
<html>
<body>
<div id="wrapper">
<div class="sideBar">
Sidebar
</div>
<div class="product-wrapper">
<div class="productsBox">
Item
</div>
</div>
</div>
</body>
</html>
You should take .sideBar out of the #wrapper container and apply width: calc(100% - 210px) to #wrapper (i.e. the width of the container/window minus sidebar minus its left margin). That way both together will be 100% wide, but the contents of #wrapper will not go under the sidebar.
you should add side bar and another containts in different divs and add this code to it:
.wrapper{
display:flex;
flex-direction:row;
}
.sidebar{
background-color:red;
width:50%;
}
.containts{
width:50%;
background-color:green;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="containts">
containts
</div>
</div>
Add the following code in css it worked for me
height: 100%;
I'm trying to specify content specifically somewhere on the page, How can i do this so that it'll always be in the exact same spot even when screen size changes?
jsfiddle = https://jsfiddle.net/4pkgfgwh/1/
<div class="container">
<img src="http://i.imgur.com/iGIFvH6.png" style="width:354px;height:228px;">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
.container {
text-align: center;
}
.display {
position:absolute;
TOP:45px;
LEFT:350px;
}
Use position: relative on the parent container:
HTML
<div class="container">
<div class="image-container">
<img src="http://i.imgur.com/iGIFvH6.png">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
text-align: center;
}
.image-container {
display: inline-block;
position: relative;
width: 354px;
height: 228px;
}
.container img {
width: 100%;
}
.display {
position: absolute;
top: 10px;
left: 200px;
}
JSFiddle demo: https://jsfiddle.net/ompfnjc5/2/
I have 2 elements:
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
and i wanted to make a align left and b to align right. Normally im used to leveraging float, but i wanted it to fit within the confines of the parent object for cleanliness.
Im trying to get A and B be clean and line up horizonally while 1 is on 1 size of the div.
I was trying various attempts of display:inline-block and then doing a flight right etc but that isnt getting the desired effect.
EDIT It seems that generally speaking, float right and left were working. The issue is that the bottom alignment is off which was annoying me.
If i am incorporating a float right and float left, it works based on the element, but if there a way to line it up so that both A and B are resting on the bottom of the parent?
have you considered flex ?
#parent {
display:flex;
justify-content:space-between;
}
div {
margin:auto 0 0;/* they line up from bottom in this margin case */
border:solid;
}
<div id="parent">
<div id="a">a</div>
<div id="b">b<br/>line</div>
</div>
or
#parent {
display:flex;
justify-content:space-between;
}
div {
border:solid;
/* no rules about behaviior makes each boxes of a row same height */
}
<div id="parent">
<div id="a">a</div>
<div id="b">b<br/>line</div>
</div>
now question doesn't say about size (width/height) of boxes :)
Here's another option (based off your new criteria)
HTML
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
CSS
#a, #b {
width: 50%;
display: table-cell;
vertical-align: bottom;
}
#parent {
width: 100%;
display: table;
}
FIDDLE
Try this:
<div id="parent">
<div id="a" style="float: left;">Hello</div>
<div id="b" style="float: right;">World!</div>
<div style="clear: both;"></div>
</div>
Need something in the middle of it?
<div id="parent">
<div id="a" style="float: left;">Hello</div>
<div id="b" style="float: right;">World!</div>
<div style="text-align: center;">holy schmoley</div>
<div style="clear: both;"></div>
</div>
All together now.
<style type="text/css">
#a {
float: left;
}
#b {
float: right;
}
#c {
text-align: center;
}
.clear {
clear: both;
}
</style>
<div id="parent">
<div id="a">Hello</div>
<div id="b">World!</div>
<div id="c">holy schmoley</div>
<div class="clear"></div>
</div>
Of equal heights:
<style type="text/css">
#a, #b, #c {
height: 100%;
}
#a {
background-color: #ff0000;
float: left;
}
#b {
background-color: #00ff00;
float: right;
}
#c {
background-color: #0000ff;
text-align: center;
}
.clear {
clear: both;
}
</style>
<div id="parent">
<div id="a">Hello</div>
<div id="b">World!</div>
<div id="c">holy schmoley</div>
<div class="clear"></div>
</div>
Aligned to the bottom using absolute, I recommend adding a margin to the #c div to prevent any odd overlapping:
<style type="text/css">
#parent {
position: relative;
}
#a, #b {
position: absolute;
bottom: 0;
}
#a {
background-color: #ff0000;
}
#b {
background-color: #00ff00;
right: 0;
}
#c {
background-color: #0000ff;
text-align: center;
}
.clear {
clear: both;
}
</style>
<div id="parent">
<div id="a">Hello</div>
<div id="b">World!</div>
<div id="c">holy schmoley<br /><br /><br /></div>
<div class="clear"></div>
</div>
Float with Flex
<style type="text/css">
#container {
/* width: 600px; */
}
#parent {
position: relative;
}
#a {
display: flex;
float: left;
justify-content: space-between;
width: 100%;
}
#b {
background-color: #ff00ff;
float: left;
width: 100px;
}
#c {
background-color: #00ff00;
float: right;
width: 100px;
}
#d {
padding: 0 100px 0 100px;
width: inherit;
}
#e {
background-color: #ff0000;
}
</style>
<div id="container">
<div id="parent">
<div id="a">
<div id="b">Hello</div>
<div id="c">
World!
<br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="d">
<div id="e">
<br /><br /><br /><br /><br /><br />Heres my content!!<br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
© Copyright
Float with flex, bottom positioning:
<style type="text/css">
#container {
/* width: 600px; */
}
#parent {
position: relative;
}
#a {
bottom: 0;
display: flex;
float: left;
justify-content: space-between;
position: absolute;
width: 100%;
}
#b {
background-color: #ff00ff;
float: left;
width: 100px;
}
#c {
background-color: #00ff00;
float: right;
width: 100px;
}
#d {
padding: 0 100px 0 100px;
width: inherit;
}
#e {
background-color: #ff0000;
}
</style>
<div id="container">
<div id="parent">
<div id="a">
<div id="b">Hello</div>
<div id="c">
World!
<br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="d">
<div id="e">
<br /><br /><br /><br /><br /><br />Heres my content!!<br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
© Copyright
Using the flex float bottom as your full page layout:
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
}
#parent {
position: relative;
height: 100%;
}
#a {
display: flex;
float: left;
justify-content: space-between;
width: 100%;
position: absolute;
bottom: 0;
}
#b {
background-color: #ff00ff;
width: 100px;
float: left;
}
#c {
background-color: #00ff00;
width: 100px;
float: right;
}
#d {
bottom: 0;
left: 100px;
right: 100px;
position: absolute;
}
#e {
background-color: #ff0000;
}
</style>
<div id="container">
<div id="parent">
<div id="a">
<div id="b">Hello</div>
<div id="c">
World!
<br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="d">
<div id="e">
Heres my content!!<br /><br /><br />
</div>
</div>
</div>
</div>
div#a{text-align:left;}
div#b{text-align:right;}
Or vice-versa will do the trick.
If you want to avoid float then you can use display: table; to achieve the desired effect. But this will need an additional wrapper.
CSS
#wrap {
display: table;
width: 100%;
}
#parent {
display: table-row;
width: 100%;
}
#a {
display: table-cell;
width: 50%;
background: green;
}
#b {
display: table-cell;
width: 50%;
background: red;
}
HTML
<div id="wrap">
<div id="parent">
<div id="a">AAAA</div>
<div id="b">BBBBB<p>
asdfafasfasdf
</p></div>
</div>
</div>
See my jsfiddle .
give 50% width to each div a and b and then make a float:left and b float:right .
and give equal height to both divs a and b .
try it
<div id="parent">
<div id="a">div a</div>
<div id="b">div b</div>
</div>
#a {
background:red;
float:right;
width:50%;
height:200px;
}
#b {
width:50%;
background:green;
float:left;
height:200px;}
I am struggling trying to get the text to sit next to the image, its just not happening, please can some one explain what im doing wrong here? much appreciated!
.alignright {
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->
Try using tags instead of div with display:initial in all 3 tags (img, h1, h2) and in h1 and h2 span tag set the float property to right or left.
Just corrected what was needed :
(click on full page in code snippet or else you will not see the difference with your own result)
.wrap {
width: 40%;
margin-left: 2%;
}
.alignright {
display: inline;
}
.source {
float: left;
overflow: hidden;
width: 20%;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin: 25px;
display: inline;
}
<div class="wrap">
<div class="source">
<img src="../image/recomendbutton.jpg">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
.alignright {
margin-top:-40px;
width: 77%;
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150"><span>
</div>
<h1 class="alignright">Recommendations?</h1></span>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->