This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
There is some space between #child divs. How can I make them stack perfectly without any gaps? There is no problem when I don't have the <img> in there. Also, there is a blue stripe under the image, which is part of the div, but I don't understand why it's showing.
I am not an expert on HTML or CSS. I am a beginner who is starting to pick it up for marketing reasons. Any help and/or advice is highly appreciated it!
#parent {
max-width: 850px;
margin: 0 auto;
border: 10px solid black;
}
#child {
background-color: blue;
text-align: center;
color: #eee;
font-size: 56px;
}
img {
width: 100%;
}
<div id="parent">
<div id="child">
<img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
</div>
<div id="child">
<p>Div 2</p>
</div>
<div id="child">
<p>Div 3</p>
</div>
<div id="child">
<p>Div 4</p>
</div>
</div>
Here is an image of my problem.
http://imgur.com/a/sqdpB
Paragraphs have a margin by default, so just remove that. And to get rid of the line below the image, add vertical-align:top to your img rules:
#parent {
max-width: 850px;
margin: 0 auto;
border: 10px solid black;
}
#child {
background-color: blue;
text-align: center;
color: #eee;
font-size: 56px;
}
img {
width: 100%;
vertical-align: top;
}
p {
margin: 0;
}
<div id="parent">
<div id="child">
<img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
</div>
<div id="child">
<p>Div 2</p>
</div>
<div id="child">
<p>Div 3</p>
</div>
<div id="child">
<p>Div 4</p>
</div>
</div>
try to set margin and padding to 0px in your paragraph
that should solve your problem
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I'm trying to mimic a website. I'm using flex for my divs, but they are not properly aligning.
What mine looks like: https://i.imgur.com/4k5ln1T.png
What I want it to look like: https://i.imgur.com/Wl6DY1t.png
My Code:
<div class="div1">
<img src="https://i.imgur.com/AbZMoEL.png" class="image" alt="cookie picture">
<p class=""> cookies are great! </p>
<a class="modulbutton" href="#open1">Open modal link</a>
<div class="div1">
<img src="https://i.imgur.com/kdOyxwV.png" class="image" alt="icecream picture">
<p class=""> Ice cream is great! </p>
<a class="modulbutton" href="#open1">Open modal link</a>
<div id="open1" class="modalwindow">
<div class="msgblock">
<h1>Heading</h1>
<p>some text</p>
<img src="2.jpg" alt="missing">
<div class=""> Close</div>
</div>
</div>
</body>
<footer>
<style>
.div1 {
width: 900px;
height: 400px;
border: 3px solid blue;
display: flex;
align-items: center;
}
.modulbutton{
background-color: green;
color: white;
padding: 3%;
text-decoration: none;
}
Any help would be greatly appreciated, I can't seem to align the description text and modal button properly on the bottom of the image.
Thanks!
what you need to do is put the p tag and a tag in a div under div1 then use flex direction in css on your div 1
<div class="div1">
<img src="https://i.imgur.com/AbZMoEL.png" class="image" alt="cookie picture">
<div> <p class="indent"> cookies are great! </p>
<a class="modulbutton" href="#open1">Open modal link</a>
</div>
</div>
.div1 {
width: 900px;
height: 400px;
border: 3px solid blue;
margin: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
I am trying to put a text under every image of an album. so I've added 6 photos side by side with float left. I know that the img tag is an inline-block of default so I put a div with class text with text inside and in the CSS I assigned it "display: block" in this way I thought I would make it appear under the image .. why this does not happen? I tried also to assign to the div text... position absolute and to the container position relative but this only works for the first image ...
.conteiner {
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
.box {
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: calc(100% / 6 - 20px);
height: 15vh;
float: left;
margin: 10px;
background-position: center;
}
.clearfix {
content: '';
display: table;
clear: both;
.text {
display: block;
}
<div class="conteiner clearfix">
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
enter image description here that's what I have
enter image description here and that's what I want to do
It would be much simpler to use Grid or Flexbox to get such a layout. No need for float and clear.
Using Grid:
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
Then simply place the 6 images first to fill up the first row and the 6 texts second to fill up a second row.
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
</div>
Also, the content of the grid will be sized to fill the grid area so you may not have to explicitly size the box.
.box{
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: 100%;
height: 15vh;
background-position: center;
}
Try this :
https://codepen.io/the-wrong-guy/pen/xxZzBwR
.box {
display: grid;
}
I have 3 divs with content in them, and the 2 with less content are flush with the bottom of the larger div.
There's no margin or padding, so I'm not sure why is this happening?
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
It is because of the vertical-align property on the .box class is set to bottom. Setting elements to be inline-block will allow the vertical align property to affect their positioning.
Just a note: you didn't set the vertical align property yourself, but it is inheriting it from another rule. Try setting it directly to see the different results.
.box {
vertical-align: top;
/* ... */
}
Since they are inline-level elements, their vertical alignment is given by the vertical-align property.
.box {
vertical-align: /* value */;
}
Some examples:
vertical-align: top
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: top;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
vertical-align: middle
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: middle;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
vertical-align: bottom
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: bottom;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
Why is it that my border does not go around my inner divs, and my inner div borders do not go to the bottom of the outer div, ( in FF but need this for all major browser).
Can someone please help
<div id="main">
<div class="insidediv">
<p>Article 1</p>
</div>
<div class="insidediv">
<p>Article 2</p>
</div>
<div class="insidediv">
<p>Article 3</p>
</div>
</div>
#main{
width: 800px;
height: 100%;
border: 20px solid black;
}
.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
Alter #main to float: left; or overflow:hidden. I recommend the float
Set overflow: hidden; on #main.
Edit: demo
Floating elements takes them out of the normal flow of the document, meaning their container no longer understands where they end for lack of a more technical explanation. To solve the issue you need to clear the float after the last inner div by adding an element with clear:both applied. http://jsfiddle.net/calder12/BcqnE/
<div id="main">
<div class="insidediv">
<p>Article 1</p>
</div>
<div class="insidediv">
<p>Article 2</p>
</div>
<div class="insidediv">
<p>Article 3</p>
</div><div class="clear"</div>
</div>
#main{
width: 800px;
height: 100%;
border: 20px solid black;
}
.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
.clear{clear:both;}
There is also the clearfix method which is similar to the above but the more standard approach these days. http://j.mp/bestclearfix
I have 2 divs beside each other. I would like to have both divs the same height. Possible?
Here is a JsBin as a starting point: http://jsbin.com/uhoqeb/edit#html,live
Thanks.
For this you can use display:table-cell property for this.
#leftSection, main-content{
display:table-cell;
}
Check this http://jsbin.com/uhoqeb/2/edit#html,live
But it's not work IE7 & below.
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
If you want a border round it then have a look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html
add a container div
#macroSection {
height: 250px;
border: 1px solid #AAA;
}
then add the property "height" to the other 2 divs:
#leftSection
{
background-color: #fff;
width:170px;
float:left;
height: 100%;
border: 1px solid #c7c7c7;
display:block;
}
#main-content
{
width:250px;
overflow:auto;
height: 100%;
border: 1px solid #c7c7c7;
display: block;
overflow: hidden;
}
then wrap them in your html like this:
<div id="macroSection">
<div id="leftSection">
This is my left section
</div>
<div id="main-content">
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
</div>
</div>
You can also achieve this with javascript:
<script type="text/javascript">
document.getElementById('leftSection').style.height = document.getElementById('main-content').clientHeight;
</script>