I've read many other posts regarding floating divs, but haven't been able to find success yet with the things I've tested, so here I am... (I'm still new to this, so apologies if my code isn't super clean!)
I have an image that I'd like to float over several others. My goal (if it is attainable) is to have it in a fixed position from the upper right corner of .container. I'm close... but I can't get the image to move in from the right, and as it sits now, it is bumping the other photo out of the header (without the .crosses added, it sits in the green, right-aligned.)
The project requires that it still looks good (or degrades nicely) in IE7.
I've set up a fiddle here: (can't figure out what the red error means by "links to jsfiddle.net must be accompanied by code") so, if you could just go there and visit:
http://jsfiddle.net/cathi/VAkk5/5/
HTML (extract):
<div class="container">
<div class="crosses"><img src="/img/common/crosses-motif.png" width="213" height="118" alt="crosses-motif" /></div>
<div class="header"></div>
<div class="hero">
<div class="herophoto">photo</div>
</div>
</div>
CSS (extract):
.container {
width: 80%;
margin: 0 auto;
}
.crosses {
float:right;
margin-right:0;
margin-top:130px;
}
.header {
height: 150px;
}
.headerlogo {
width: 250px;
padding-top: 80px;
padding-left: 20px;
float:left;
}
.headerlogo2 {
float:right;
}
.hero {
height: 205px;
}
.heroheadline {
height: 0;
width: 450px;
padding-top: 45px;
padding-left: 70px;
float:left;
}
.herophoto {
height: 205px;
width: 333px;
float: right;
}
Related
TL;DR: Here's a CodePen.
I have a UI with an image and a grid of text with long lines which looks like this:
I'm using CSS Flexbox with two elements: the image and the text. And then to lay out the text, I'm using CSS Grid. Now, when I view this on a narrow screen for mobile, it correctly wraps everything and stacks the two elements:
But on desktop, with a slightly narrower div, the flex box wraps before the grid text like this:
How can I get the text to wrap while leaving the flex box alone in this case? I fear I may need to use some media queries, but I'm not even sure if I'm using the right CSS components for this.
Here's the code:
index.html:
<div class="media-callout">
<div class="media-thumb">
<img height="170" width="120">
</div>
<div class="media-callout-grid">
<div class="media-callout-key">Authors</div>
<div>Babalola, J & Ogunkola, Babalola</div>
<div class="media-callout-key">Year</div>
<div>2013</div>
<div class="media-callout-key">Title</div>
<div class="media-callout-value">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</div>
<div class="media-callout-key">Journal</div>
<div><em>Journal of Educational and Social Research</em></div>
<div class="media-callout-key">Location</div>
<div>vol. 3, no. 1, pp. 265–274</div>
<div class="media-callout-key">DOI</div>
<div>10.5901/jesr.2013.v3n1p265</div>
</div>
</div>
style.css:
.media-callout {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
column-gap: 10px;
padding: 1em;
max-width: max-content;
}
.media-thumb img {
float: left;
height: 175px;
width: auto;
}
.media-callout-grid {
display: grid;
font-size: 12pt;
grid-template-columns: 6em 1fr;
align-content: center;
gap: 0 15px;
}
.media-callout-key {
text-align: right;
font-weight: bold;
}
.media-callout-value {
word-break: break-word;
word-wrap: break-all;
}
A media query does indeed resolve this:
#media screen and (min-width: 600px) {
.media-callout {
flex-wrap: nowrap;
}
}
The query must come AFTER the .media-callout block. I also had to use this approach to prevent the image from being squashed.
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
Before Chrome 43, div1 would take up 10% of the container height regardless of its childrens size, and div1 would overflow. As of Chrome 43 div1 doesnt follow flex-grow anyone more and instead grows to its childrens size. Is this supposed to work this way? How do i get div1 to overflow and follow its flex-grow property. Thanks!
Heres a jsfiddle: http://jsfiddle.net/HorseFace/xsbmmf4o/
<div id="container">
<div id="div1">
<div id="inner1"></div>
</div>
<div id="div2">
<div id="inner2"></div>
</div>
</div>
#container {
height: 500px;
display: flex;
flex-direction: column;
}
#div1 {
background: red;
flex-grow: 0.1;
}
#inner1 {
height: 200px;
background: lightcoral;
}
#div2 {
background: blue;
flex-grow: 0.9;
overflow: auto;
}
#inner2 {
height: 200px;
background: #ccccff;
}
body {
color: purple;
background-color: #d8da3d
}
You are misunderstanding flex-grow. It sets the flex grow factor,
which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to 1.
So only free space space is distributed. If you want that flex item to take up 10% of the flex container, you should set the flex-basis to 0:
the flex basis [is] the initial main size of the flex item, before free space is distributed.
Note you can use the shorthand flex property to set both flex-grow and flex-basis simultaneously (and flex-shrink too):
flex: 0.1; /*
flex-grow: 0.1;
flex-shrink: 1;
flex-basis: 0;
*/
Also note that the Flexbox spec changed the initial value of min-height and min-width to auto (previously it was 0). This may break your percentages, so either use overflow different than visible, or set min-height: 0.
body {
color: purple;
background-color: #d8da3d
}
#container {
height: 500px;
display: flex;
flex-direction: column;
}
#div1, #div2 {
min-height: 0; /* Or `overflow: hidden` */
}
#div1 {
background: red;
flex: 0.1;
}
#inner1 {
height: 200px;
background: lightcoral;
}
#div2 {
background: blue;
flex: 0.9;
overflow: auto;
}
#inner2 {
height: 200px;
background: #ccccff;
}
<div id="container">
<div id="div1">
<div id="inner1">Inner1</div>
</div>
<div id="div2">
<div id="inner2">Inner2</div>
</div>
</div>
If you look here... http://matiny.tk/Mixed%20Swim/Mixed.html
This is a simple site I'm making. It uses Bootstrap to switch the menu when the screen shrinks. Nicely enough, the Menu label/checkbox combo is not working, though it has worked on another site of mine. This is the relevant code...
<label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png"></label>
<input type="checkbox" id="menulogo">
</nav>
<nav id="menu">
SHOP
ABOUT
BLOG
GALLERY
CONTACT
</nav>
label {
font-size: 40px;
width: 100%;
color: white;
z-index: 2;
}
#menulogo {
opacity: 0;
}
#menu a {
background: rgba(0,0,0,.35);
font-size: 50px;
color: white;
height: 75px;
}
#menu {
margin-top: 100px;
text-align:center;
z-index: 3;
display: none;
position: fixed;
}
#menulogo:checked + #menu {
display: block;
}
As it turns out, my order of elements was incorrect. If one is going to use something like... #menulogo:checked + #menu, then the + or ~ selector means that the nav with #menu has to go right after the checkbox input, like so...
<label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png"> MENU</label>
<input type="checkbox" id="menulogo">
<!--These must be in sequence-->
<nav id="menu">
SHOP
ABOUT
BLOG
GALLERY
CONTACT
</nav>
It's my problem:
http://jsfiddle.net/Vqa7v/
body {
background: url("http://imgs.ir/imgs/201307/1336_menu.png") no-repeat scroll center top transparent;
}
#menu {
display: block;
height: 193px;
margin: auto;
position: relative;
top: 32px;
width: 400px;
}
nav {
left: 0;
min-width: 426px;
position: absolute;
text-align: center;
top: 79px;
}
nav a {
padding: 5px 7px;
color:white;
}
<div id="menu">
<nav>
HOME
SERVICES
ABOUT
BLOG
CONTACT
</nav>
</div>
At first, the menu is fit to background position, but make the Result window smaller & smaller to see when the menu get out of the background position.
How to avoid that and fix menu to background image position? (I want to have a menu in center of my website on its background image)
Had some real trouble understanding what you were looking for, but is this it? Basically it needed a whole bunch of changes that I've made to nav etc.
http://jsfiddle.net/robsterlini/Vqa7v/2/
I solved it by my self: http://jsfiddle.net/Vqa7v/4/
.menu {
position:absolute;
top: 20px;
left:15px;
}
nav {
text-align: center;
position:absolute;
width:100%;
height:100px;
background:url('http://upload7.ir/images/27569577012963327319.jpg') no-repeat;
min-width:500px;
}
nav a {
padding:0 5px 0 0;
line-height:35px;
color:oldlace;
text-shadow:0 0 2px #000;
text-decoration:none;
letter-spacing:1px;
}
<nav>
<div class="menu">
HOME
SERVICES
ABOUT
BLOG
CONTACT
</div>
</nav>
Small the RESULT window width and see the menu is fixed to the background image.