I have a container with two divs. If I apply float:left to the first, the second will go up occupying the remaining space to the right of the first. All good.
But if I apply a width to both the first and the second , something strange happens: The second goes up but places itself to the left of the floating element and also its content stays below.
.section{
padding:30px 0;
border: solid 2px blue;
}
.row1{
width:40%;
height: 100px;
border: solid 2px red;
margin-left:21%;
float: left;
}
.row2{
width:40%;
height: 100px;
border: solid 2px green;
margin-left:0;
padding:0;
}
<div class="section">
<div class="row1">
<p>This is a paragraph</p>
</div>
<div class="row2">
<h1>This is a header</h1>
</div>
</div>
Why is this happening? I expected the content of the second div to be to the right of the first div (as it happens when no width is set for the second div).
Thanks
Related
I finished my website but I didn't realize that safari doesn't support the flexbox gap. Is there a way around this without having the mess anything up? This is mostly for my media queries.
<div class="social-media">
<a href="https://github.com/">
<img class="social-media__icon" src="img/github.png" alt="Github">
</a>
<a href="https://www.linkedin.com/">
<img class="social-media__icon" src="img/linkedin.png" alt="LinkedIn">
</a>
</div>
.social-media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8rem;
margin-top: 10rem;
padding-bottom: 2rem;
}
.social-media img {
width: 90px;
height: 90px;
}
#media only screen and (max-width: 400px) {
.social-media {
gap: 3rem;
margin-top: 5rem;
}
.social-media img {
width: 62px;
height: 62px;
}
}
Use the Lobotomized owl selector: .parent > * + * {} to add a margin-left that gives you space between the elements that come after another element, this way you eliminate the undesired margin it creates when you put the margin directly to the child's first element (.social-media img{})
.social-media > * + * { margin-left: 8rem;}
Here you can read more about the Lobotomized Owl Selector
Edit: Gap is now supported in safari so you should be able to use it no problem.
Property gap with display: flex is not supported by Safar version < 14 https://caniuse.com/flexbox-gap .
You might want to replace display flex with grid:
display: grid;
grid-gap: 8rem; /* Safari 10-11 */
gap: 8rem; /* Safari 12+ */
because grid's gap is supported in older Safari versions: https://caniuse.com/mdn-css_properties_gap_grid_context
The accepted answer has the problem, that you will have a wrong margin on the first element if when there is only one row. Also centered elements will always be 8rem too far the right.
Better solution that will always work with correct spacings:
.container {
display: flex;
// the trick is to set margins around boxes, but correct the margins around elements that are situated at the border of the container with negative margins
margin: 0 -10px -20px -10px;
}
.box {
min-width: 100px;
height: 100px;
background-color: deeppink;
margin: 0 10px 20px 10px;
}
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>
You can remove the gap class and add another one to child elements
<div class="d-flex"> // it was "d-flex gap" previously
<div class="mx-2">
//content
</div>
<div class="mx-2">
//content
</div>
</div>
I think you could make a div container and put justify-content: space-between; then i think it should work
Image captions are aligned bottom by flexbox within a gallery where images have different heights. How can I achieve that first lines of text (titles) are aligned horizontally?
<style type="text/css">
* {
box-sizing: border-box; }
.flex-container {
display: flex;
flex-wrap: wrap; }
.flex-item {
width: 50%;
padding: 20px;
display: flex;
flex-direction: column; }
.flex-item img {
width: 100%;
height: auto; }
.flex-image {
flex: 1 0 auto; }
</style>
<div class="flex-container">
<div class="flex-item">
<div class="flex-image">
<img src="img-1.jpg" alt="" />
</div>
<p>title</p>
</div>
<div class="flex-item">
<div class="flex-image">
<img src="img-2.jpg" alt="" />
</div>
<p>title<br>Lorem ipsum dolor sit amet.</p>
</div>
</div>
Please check my codepen: https://codepen.io/tinusmile/pen/MoeORG
Many thanks!
With the existing markup, where the images can have different heights, you need to do something like this, where you give the p a height.
As an element's overflow defaults to visible, it will flow out of its boundaries, so I recommend to set the height so it can accommodate 2-3 lines of text.
On smaller screens you might need to add a #media query to adjust that height, as if the text is very long it might overflow any element below itself.
.flex-item p {
height: 50px; }
Updated codepen
Note, using min-height instead would solve the might overflow any element below itself issue, though it will make the first line to not align horizontally if the value does not accommodate all the possible amount of lines.
Another option is to remove the flex-item wrapper and use Flexbox's order property, as I suggested in a previous question of yours, align-horizontally-3-elements-over-3-divs
I have a website I am creating for a school project. I am very new to html and css. I have created div containers for the different sections of my pages. On my index page, I have 5 containers including the header and footer.
The containers are working everywhere except in 1 location where I am floating images. For some reason, the box is shrink-wrapping under the 3 images. I thought by placing a position:relative in the .container css rule, it would behave like it is with paragraphs and other elements. I would like that container to surround the pictures just like it is with the other boxes on the index page.
Here is the html for that specific container that is not working:
<div class="container">
<article>
<h2>Meet the Staff:</h2>
<div class="gallery">
<figure class="staff"><img src="images/mary.jpg" alt="mary the librarian" />
<figcaption>Mary the Librarian</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/ruth.jpg" alt="mary the librarian" />
<figcaption>Ruth the Assistant</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/esther.jpg" alt="mary the librarian" />
<figcaption>Esther the Research Librarian</figcaption>
</figure>
</div>
</article>
</div>
And here is the css:
.container {
width: 1000px;
height: auto;
margin: auto;
margin-bottom: 25px;
padding: 0 20px;
position: relative;
background: #fff;
box-shadow: 0 0 10px #b5b2ab;
}
figure img {
border: 1px solid #666;
background-color: #fff;
padding: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
figcaption {
font: Arial, sans-serif;
text-align: center;
margin: 10px 0 0 0;
}
figure {
display: block;
float: left;
width: 240px;
margin: 0 25px 25px 25px;
}
Here is the so you can see what is happening: http://www.ta5zc.com/
Thanks for any help you can provide. I can't seem to figure out what is wrong.
Embarrassing, but I figured it out. The container is acting just like it is supposed to. There was no elements below the images, so there was nothing to stay in place. Therefore, when I floated the images, the box moved up the page like it was supposed to. Like I said, I'm new at this ;-)
Trying layout inline elements I discover wierd behavior.
Can someone explain me why is there any different?
To both HTML I apply this css:
.time {
position: relative;
top:100px;
height: 5px;
background: red;
border-radius:5px;
text-align: justify;
font-size: 0.1px;
padding: 0px 10px;
}
.time > .snapshot {
position: relative;
display: inline-block;
width:2px;
height: 13px;
top: -5px;
background: red;
}
.time:after {
content:'';
width: 100%;
display: inline-block;
}
And now HTML
- Wierd behavior:
<div class="time" >
<div class="snapshot" ></div><div class="snapshot" ></div>
</div>
http://jsfiddle.net/FSLAJ/
Expect behavior:
http://jsfiddle.net/dXwjR/1/
Update
I play a little with inline-block and justify, and I have another wierd example:
<div style="text-align: justify;">
test test test
<div style="display: inline-block; width: 100%;">test test</div>
test test test
</div>
JSFiddle example
I just wonder why second anonymous inline element is not justify?
The difference is due to the fact that inline elements are sensitive to white space in the code, and that's what's providing the spacing in your "expected" example. Add some margin-right to your .snapshot tick marks in your other one and they'll spread out like the other example.
jsFiddle example
What I am trying to achieve is a shadow ONLY in the middle of a div. What I have now is:
<body style="background-color: #ccc;">
<div style="padding: 30px;
-webkit-box-shadow: inset 0px 0px 0px 20px #000;">
Some text in the box</div>
</body>
Which looks like (#1):
But I want to achieve (#2):
Question A: Is it possible to achieve #2 using only CSS?
Question B: If yes to Question A, how should #2 be modified to achieve the effect only on the top and the bottom, leaving the sides shadowed all the way from left to right (#3)?
Clarification: The intent is to use a 50% shadow that shows up only in the middle of a div, but I CANNOT change any HTML, only CSS. Also, The code posted here is oversimplified. There are several elements inside the div, including images. I cannot change their BG.
I have achieved your #3 using this html:
<body>
<div id="shadow">Some text in the box</div>
</body>
and this css:
body, html {
margin: 0;
padding:0;
background-color: #ccc;
}
div#shadow {
margin-top:20px;
padding: 15px 30px;
background-color: #000;
color:white;
}
you can see it here: http://jsfiddle.net/quPB5/
Edit:
Here is only the modified CSS:
<body style="background-color: #ccc;margin: 0;padding:0;"><div style="margin-top:20px;padding: 15px 30px;background-color: #000;color:white;">Some text in the box</div></body>
You can use "box-sizing" to move the padding and borders etc, inside the div and in this way - keep the div size despite changes in padding or shadow. In this case I have box-sizing on the wildcard, *
I put it on everything, but you can just put it on the elements you want as well.
Also add inset to your shadow.
HTML
<div class="box box-shadow">inset shadow</div>
CSS
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* this moves padding and borders and such inside the div instead of outside */
.box {
width: 300px;
height: 100px;
padding: .5em;
background-color: rgba(255,255,255,.1);
}
.box-shadow {
-webkit-box-shadow: inset 0px 0px 50px 5px #f06; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: inset 0px 0px 50px 5px #f06; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
HERE is a jsfiddle with it in action:
As far as your last question I'm a little unsure of what you want. shadow just on top and bottom? That would be cool... could use some pseudo elements maybe --- ? ? ?