This question already has answers here:
Why is the parent div height zero when it has floated children
(4 answers)
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 8 years ago.
I'm very confused. I want the contents of 2 divs to dynamically expand the height of their parent div based on child divs sizes; up to a maximum of 600px -- but instead they're just overlapping and it isn't increasing in size. Would somebody mind providing some insight? Clearly I'm missing something here.
Here is what's happening:
http://puu.sh/2Vexi.png
Here's my html:
<div class="pictureBoxContainer">
<div class="pictureBox">
<div class="pBoxLeftColumn">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit perspiciatis nihil explicabo quasi veritatis ipsum.
</div>
<div class="pBoxRightColumn">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, architecto quis quaerat excepturi maxime.
</div>
</div>
</div>
Here's my css:
.pictureBoxContainer {
padding: 12px;
clear:left;
clear:right;
width: 100%;
background-color: #eee;
border-radius: 4px;
max-height: 600px;
}
.pictureBox {
border: 1px solid #ee5;
width:100%;
}
.testp {
padding: 10px;
}
.pBoxLeftColumn {
display: block;
float: left;
max-width: 49.99%;
}
.pBoxRightColumn {
display: block;
float: right;
max-width: 49.99%;
}
Parents will normally expand to the height of their children, though won't in case the children are floated.
You can remove floats to accomplish expanding.
In order to expand a parentdiv based on floated children try overflow: auto; on .pictureBox. This will make .pictureBox expand to the height of its children. Here's a Fiddle showing the result.
Related
I am trying to accomplish this section of a webpage and am having a difficult time finding a good way to overlap the yellow from the 1st column partially over the 2nd column image. I have set up the columns and have tried using negative properties but that didn't work. I tried adding it to the image in Photoshop but that was a BIG fail. I obviously can't do a border hack with opacity.
Am I missing something? I just can't think of a good way to do this. Any help is appreciated.
I would approach this using absolutely positioned pseudo content within a relatively positioned parent. The following example is missing many details, of course (media queries, better spacing, font treatment, etc.), but is one way to accomplish what you're trying to do.
.container {
display: flex;
}
.leaf {
background-color: yellow;
flex: 1;
position: relative;
margin: 2.5em 0;
}
.leaf-content {
padding: 1em 3em 1em 1em;
}
.leaf::after {
content: '';
background-color: yellow;
right: -150px;
top: 0;
bottom: 0;
width: 150px;
opacity: .35;
position: absolute;
}
.container img {
width: 500px;
height: auto;
}
body {
font-family: sans-serif;
}
<div class="container">
<div class="leaf">
<div class="leaf-content">
<h1>BIKE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est, ipsa minus repellendus, rerum officia eaque, quia pariatur voluptatibus asperiores inventore illum laudantium soluta itaque sit nobis officiis deserunt vero!</p>
</div>
</div>
<div class="img-container">
<img src="https://images.unsplash.com/photo-1517054612019-1bf855127c43?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4814eb541ddb4ef86140974f1bee831&fit=crop&w=1000&h=1000&q=80" alt="">
</div>
</div>
jsFiddle
I would like to achieve a result similar to balancing text lines in print but for block elements. Say a collection of 50/50px boxes in a 300/100px container. Floating the boxes within the container will make them fill up one "row", then wrap onto the next one like this:
[1][2][3][4][5][6]
[7]
I would like them to "wrap" in a more balanced way:
[1][2][3][4]
[5][6][7]
or even better, have them "wrap" at every column filling up space as they go:
[1][3][5][7]
[2][4][6]
I figured you can do this with CSS columns but it feels like a hack because the container element need to be float:left or display:inline-block to force columns to stick together, it needs a constrained height etc. I have added a snippet for reference.
Is there a more genuine CSS way to achieve this?
.wrap {
display: inline-block; /*Needs this so make colums stick together*/
columns: 100px;
column-gap: 0;
height: 200px;
}
.wrap>div {
width: 98px;
height: 98px;
background: red;
/* styling only */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid blue;
}
<div class="wrap">
<div>1Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div>2Mauris eu risus.</div>
<div>3Vestibulum auctor dapibus neque.</div>
<div>4Consectetuer adipiscing elit.</div>
<div>5Eu risus.</div>
<div>6Vestibulum auctor dapibus neque.</div>
<div>7Lorem ipsum dolor sit amet</div>
<div>8Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div>9Vestibulum auctor dapibus neque.</div>
</div>
Here's a flexbox solution: Using flex-direction: column and flex-wrap: wrap on the parent element you can make the items wrap from top to bottom and fill another column once the column is filled.
This is the code to get flexbox working:
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
And here's a demo:
.wrap {
background-color: silver;
height: 100px;
width: 400px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
.box {
height: 50px;
width: 50px;
background-color: red;
box-sizing: border-box;
border: 1px solid white;
}
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
I'm trying to create a layout with CSS and ran into the the following issue.
I have two divs, displayed side by side (one is floated left), wrapped in a third div. This works fine.
What I want to be able to do is have one div have free height (adjusted to content) and I want the other div to never be larger than this. So for example, if the first div is 3 lines of text and the second is 4 lines, the second should go into overflow. But I don't want to give a fixed value to the height of the first div or the wrapper.
How would I go about having CSS do this?
EDIT: I've created a Fiddle of what I have so far, if that helps anyone. I decided to not use float here and instead went for an absolute position + margin so the area under the left div would stay cleared.
So what I want here is for blue to be the same height as red (with overflow turning on if I enable it), but without having to set the height of anything to a fixed number.
HTML:
<div class="wrapper group">
<div class="left">Lorem ipsum dolor sit amet, vide porro ubique vis ei.</div>
<div class="right">Probo fabulas inermis cu cum. Eros voluptatibus vel te, ea sea velit quaestio consectetuer, modus facete no qui. Has eu quidam salutandi dissentiunt, his sanctus voluptatibus ei. Has lorem complectitur te, in per adipisci gloriatur dissentiunt. E</div>
</div>
CSS:
.left {
display: block;
background-color: red;
width: 10em;
position: absolute;
}
.right {
margin-left: 10em;
display: block;
background-color:blue;
}
.wrapper {
width: 100%;
border-style: solid;
border-color: yellow;
}
EDIT: I created a version with float too.
.left {
float: left;
display: block;
background-color: red;
width: 10em;
}
.right {
margin-left: 10em;
display: block;
background-color:blue;
}
.wrapper {
width: 100%;
border-style: solid;
border-color: yellow;
}
.group:after {
display: table;
clear: both;
content:"";
}
Can this help?
Fiddle
HTML:
<div class="wrapper">
<div class="left">
Lorem ipsum dolor sit amet, vide porro ubique vis ei.
</div>
<div class="right">
Probo fabulas inermis cu cum. Eros voluptatibus vel te,
ea sea velit quaestio consectetuer, modus facete no qui.
Has eu quidam salutandi dissentiunt, his sanctus voluptatibus ei.
Has lorem complectitur te, in per adipisci gloriatur dissentiunt. E
</div>
</div>
CSS:
.wrapper {
display:table;
border:1px solid #AFAFAF;
padding: 3px;
width:300px;
}
.left {
display: table-cell;
border-right: 1px solid #EFEFEF;
width:30%;
padding: 3px;
}
.right {
display: table-cell;
width:70%;
padding: 3px;
}
So you want your second div always to be at the same height as your first div, even if it's content is larger?
As far as I know it's not possible to declare the height of a div to be smaller than it's content orientated to another div without working with fixed heights.
Here I found an example of same height divs, but it is always geared to the larger div... but however, perhaps it helps you: How do I keep two divs that are side by side the same height?
Here is an example.
The link for the div class="learn" is 1014px wide. While the button is only 215px wide.
What did I do wrong?
.inside {
width: 1014px;
margin: 0 auto;
overflow: hidden;
}
#people .learn {
display: block;
background: url(http://www.domain.com/images/learn.png);
width: 215px; height: 51px;
margin: 30px 0 0 20px; padding: 0;
}
<div id="people">
<div class="inside">
<div class="headline"><span class="bold">Best</span> Webhosting Around. Period.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor suscipit purus, et blandit libero tempor in. Vivamus rutrum.</p>
<!-- PROBLEM HERE -->
<div class="learn"></div>
<!-- PROBLEM HERE -->
</div>
</div>
The div with learn class is having a block display so browser will adjust the outer <a> as as display block and occupy the available width.
Change div display as inline-block then you can see the width of <a> coming as 215px
here is the example code
<html>
<style>
.inside {
width: 1014px;
margin: 0 auto;
overflow: hidden;
}
#people .learn {
display: inline-block;
background: url(http://www.domain.com/images/learn.png);
width: 215px; height: 51px;
margin: 30px 0 0 20px; padding: 0;
border:solid 1px ;
}
</style>
<div id="people">
<div class="inside">
<div class="headline"><span class="bold">Best</span> Webhosting Around. Period.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor suscipit purus, et blandit libero tempor in. Vivamus rutrum.</p>
<!-- PROBLEM HERE -->
<div class="learn">wwww</div>fddfg
<!-- PROBLEM HERE -->
</div>
</div>
</html>
In HTML4, your markup is not Valid: DIV elements MUST NOT be descendent elements of A elements there. Only in HTML5 this is Valid. You should not rely on HTML5 being supported by a layout engine at this point.
div elements are block-level elements (per user agent stylesheet, their default is display: block); barring further CSS declarations, they are as wide as their containing block.
The containing block here is provided by the ancestor div element that has the CSS class inside specified (class="inside"). There is a CSS rule for elements with that class – .inside – in your stylesheet that says that those elements should have width: 1014px. So the descendent div element is displayed as wide as the ancestor div element, 1014px.
a elements are inline-level elements (per user agent stylesheet, their default is display: inline); barring further declarations, they have the combined dimensions of their content. The sole content of this a element is said div element. Therefore, the parent a element – the link – is as wide as the child div element (that does not really belong there).
The background-image of an element does not automatically stretch to the dimensions of the element's box, which is probably causing your confusion about the “button” represented by that background image.
It's my first time designing a fluid layout and one of the things I'm trying to do is overlay a caption at the bottom of a photo. The method I'm using is having the photo (width:100%) inside a div (width:50%) and adding a div containing the caption under the photo. To get it to overlay, I made the caption's height a static 30px and set the position as relative and top -50px (+padding).
CSS:
#contentdiv {
width:50%;
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:relative;
top:-50px;
margin-bottom:-50px;
}
HTML:
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
This does what I want visually, but it's not really a true fluid layout and it looks ugly if the caption is too or too short. Is there a way where I could let the length of the caption to determine the height of the caption div and have the "top" be the negative of whatever the height and padding is?
Pure CSS solution for a problem like the one you have
CSS
#contentdiv{
width: 50%;
position: relative;
}
#gallerydescription{
padding: 10px;
background-image: url('../contentbkg.png');
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
max-height: 60%;
overflow: hidden;
}
Markup (unchanged)
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
Update
jsfiddle try this fiddle
Try this and see how it looks like:
#contentdiv {
width:50%;
position: relative
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:absolute;
left: 0; right: 0; bottom: 0;
z-index: 5;
}
You could try jQuery UI Position for that purpose.
It allows to position two elements relatively, like
$("#elementToPosition").position({
my: "left top",
at: "right bottom",
of: "#targetElement"
});
And then change the top property for overlaying :
$("#elementToPosition").css('top',$("#elementToPosition").css('top') - 10px);