I have this pen where the layout is floated, but when I try to flexbox one container below the layout, the flexbox doesn't work. I know it is caused by the floats however, can't find a way to fix it. Tried to use clearfix but it doesnt work.
The items that i'm trying to flex is in summary tag.
Code Snippet:
summary {
clear: both;
padding: 20px;
background: white;
display: flex;
}
summary p {
width: 33%;
display: inline-block;
background: pink;
margin: 0px;
padding-right: 20px;
}
<summary class="clearfix">
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
</summary>
CodePen
The problem is that you are using flexbox in a summary tag, which is not a structural one. summary is used inside a details element. Consider using a proper semantic tag like article or section for this, and it will work.
Code Snippet:
summary,
article {
display: flex;
}
p::before {
content: "Paragraph.";
}
details > summary {
display: block;
}
<summary>
<p></p>
<p></p>
<p></p>
</summary>
<article>
<p></p>
<p></p>
<p></p>
</article>
<details>
<summary>Proper Usage</summary>
<p></p>
</details>
Change the styles to this classes
#wrapper {
width: 90%;
margin:auto;
padding: 0 20px 0 20px;
margin-bottom:20px;
display:flex;
flex-direction:column
}
and on summary remove clear and display:flex
every thing will work as expected
check this fiddle https://codepen.io/sahithiK/pen/LRqjoR?editors=1100
Hope this helps
Related
I have a flexbox and in it, I have an image and text. For some reason, there is a big area of the flexbox where I can't place content in. It is like there is padding there and it won't let it go past it. I'm not too sure why the content can't go in this area.
The part highlighted in yellow is where I can't place anything. If it goes over this area, it will just go to the next line.
What I want it for it to stretch across because right now, the text looks too close together. how can I achieve this?
/*Header for picture, and description*/
#display {
padding-top: 2em;
border: solid .125em black;
display: flex;
flex-flow: wrap;
background-color: white;
opacity: 0.9;
}
#display > * {
flex: 1 1 5%;
padding: 1em;
}
article{
margin-right:20em;
}
article h1{
font-size: 2em;
text-align: center;
}
article p{
padding-top: 2em;
}
<section id="display">
<figure id="headshot">
<img src="images/GM05.png" alt="headshot"/>
</figure>
<article>
<h1>Name Goes Here</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>
Removing the margin-right in the article tag fixes the issue, but now they aren't aligned correctly.
You must note that you have set a margin on the article.
The problem might be here:
article{
margin-right:20em;
}
This pushes your article 20em's away from the right end of your display. Just remove the margin and run the code.
I have the following code in my CSS:
#media screen and (max-width:600px) {
...
.container {
display: flex;
flex-flow: column;
max-width: 100%;
}
.container p {
display: block;
max-width: 100%;
}
...
}
This renders as expected in Chrome and Firefox, but in IE, the text fails to wrap, and each paragraph is rendered as a single line (which typically exceeds the width of the screen). There's a variety of solutions which address this situation when 'flex-flow' is not set to 'column'. Is there a way to fix the word-wrapping issue, under the condition that 'flex-flow' is set to 'column', and without setting a fixed width for either the container or child element?
Update:
The issue appears to pertain to the width of the element outside of the container. Here's a fiddle that illustrates what's going on.
HTML:
<div class='wrapper'>
<div class='container'>
<p>
Lorem ipsum...
</p>
<br>
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
</div>
CSS:
.container {
display: flex;
flex-flow: column;
}
.container p {
max-width: 100%;
}
.wrapper {
clear: both;
float: left;
max-width: 1000px;
margin-top: 20px;
}
In the above example, the text will wrap in Chrome and Firefox, but will not wrap in IE. If, for example, the value of 'display' is changed to 'table', the paragraph text will wrap as expected in all browsers.
IE 10 and 11, which support flexbox, have many related bugs nonetheless.
In this particular case, IE is not recognizing the inherent width or display value of .container.
Here's a fix:
.wrapper {
clear: both;
float: left;
max-width: 1000px;
margin-top: 20px;
display: flex; /* NEW */
}
.container {
display: flex;
flex-flow: column;
width: 100%; /* NEW */
border: 1px solid red;
}
.container p {
max-width: 100%;
border: 1px dashed black;
}
<div class='wrapper'>
<div class='container'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit nulla id odio tincidunt, in rutrum diam dapibus. Mauris et urna luctus turpis sollicitudin dictum venenatis eget massa. Suspendisse maximus lectus in nunc placerat, nec interdum
massa iaculis. Nullam sit amet ex feugiat, cursus enim non, viverra lectus. Curabitur blandit risus sed dolor viverra, sit amet auctor metus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
placerat sollicitudin ligula, convallis mattis leo porttitor vitae. Praesent id metus id erat condimentum porta. Phasellus a sapien vel lacus imperdiet pellentesque sed at risus. Curabitur venenatis scelerisque augue, quis congue lorem feugiat eu.
Suspendisse placerat elit non augue suscipit pretium.
</p>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit nulla id odio tincidunt, in rutrum diam dapibus. Mauris et urna luctus turpis sollicitudin dictum venenatis eget massa. Suspendisse maximus lectus in nunc placerat, nec interdum
massa iaculis. Nullam sit amet ex feugiat, cursus enim non, viverra lectus. Curabitur blandit risus sed dolor viverra, sit amet auctor metus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
placerat sollicitudin ligula, convallis mattis leo porttitor vitae. Praesent id metus id erat condimentum porta. Phasellus a sapien vel lacus imperdiet pellentesque sed at risus. Curabitur venenatis scelerisque augue, quis congue lorem feugiat eu.
Suspendisse placerat elit non augue suscipit pretium.
</p>
</div>
</div>
jsFiddle
IE need the width to be set, and in your case on the wrapper.
Updated fiddle
.wrapper {
clear: both;
float: left;
width: 100%; /* added */
max-width: 1000px;
margin-top: 20px;
}
I have this pen where the layout is floated, but when I try to flexbox one container below the layout, the flexbox doesn't work. I know it is caused by the floats however, can't find a way to fix it. Tried to use clearfix but it doesnt work.
The items that i'm trying to flex is in summary tag.
Code Snippet:
summary {
clear: both;
padding: 20px;
background: white;
display: flex;
}
summary p {
width: 33%;
display: inline-block;
background: pink;
margin: 0px;
padding-right: 20px;
}
<summary class="clearfix">
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
</summary>
CodePen
The problem is that you are using flexbox in a summary tag, which is not a structural one. summary is used inside a details element. Consider using a proper semantic tag like article or section for this, and it will work.
Code Snippet:
summary,
article {
display: flex;
}
p::before {
content: "Paragraph.";
}
details > summary {
display: block;
}
<summary>
<p></p>
<p></p>
<p></p>
</summary>
<article>
<p></p>
<p></p>
<p></p>
</article>
<details>
<summary>Proper Usage</summary>
<p></p>
</details>
Change the styles to this classes
#wrapper {
width: 90%;
margin:auto;
padding: 0 20px 0 20px;
margin-bottom:20px;
display:flex;
flex-direction:column
}
and on summary remove clear and display:flex
every thing will work as expected
check this fiddle https://codepen.io/sahithiK/pen/LRqjoR?editors=1100
Hope this helps
I have this code in a fiddle
I would like to know if its possible to make div float inside text, like its following text?
.a {
position: relative;
width: 100px;
height: 40px;
background: red;
}
<span>Pause and play icons will automatically be attached to every mp3 song in text. Like this for example: </span>
<div class="a"></div><span> ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem.</span>
use display:inline-block along with vertical-align, as you can set it to fit you better.
To users on comments:
This is valid HTML, because span is sibling of div and not its parent.
.a {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 40px;
background: red;
}
<span>Pause and play icons will automatically be attached to every mp3 song in text. Like this for example: </span>
<div class="a"></div><span> ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem.</span>
I expect my question has already been answered numerous times but I couldn't find it.
I'm trying to create 2 divs which are next to each other within a container. However as soon as I add content, they overflow. I've included a JSFiddle but for some reason my 2 divs are already appearing outside of the container - it doesn't on my local version. I'd like the div which the content is in to expand as well as the container. Hope I've explained it ok.
JSFiddle
* {
margin:0px;
padding:0px;
}
body {
background-color:#C0D498;
}
#page-wrap {
background-color:#FFF;
width:940px;
margin:0 auto;
margin-top: 40px;
border-radius: 5px;
padding: 20px;
}
.logo {
width:175px;
height:auto;
}
.banner {
width:755px;
height:175px;
float:right;
border-radius: 5px;
background-image:url('images/banner.png');
}
.contentWrap {
padding-bottom: 20px;
}
.contentMain {
width:70%;
background-color:blue;
float:left;
}
.contentSub {
width:30%;
background-color:red;
float:left;
}
replace your html with this:
<div id="page-wrap">
<div class="banner"></div>
<div class="contentWrap">
<div class="contentMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac semper mauris. Maecenas orci dui, auctor ac auctor eu, pretium et mi. Donec interdum diam in est euismod gravida. Curabitur ligula tortor, bibendum nec odio maximus, efficitur lobortis mauris. Vestibulum in est rutrum, imperdiet turpis quis, elementum massa. Sed quis odio ut urna porttitor lobortis. Vivamus feugiat accumsan porttitor. Quisque sed ligula ac neque faucibus tristique. Suspendisse molestie eleifend purus vitae maximus. Proin posuere ante ut velit condimentum aliquam. Nullam pellentesque, mi rhoncus sagittis efficitur, libero ante scelerisque turpis, quis cursus dui libero eget dui. Suspendisse fringilla ut massa at aliquam. Praesent ut tempus erat, nec euismod ligula. Aliquam dui ex, viverra id commodo a, cursus sed sem. Praesent vel egestas nisl.</div>
<div class="contentSub">g</div>
</div>
<div style="clear:both; float:none;"></div>
</div>
The important part is this: <div style="clear:both; float:none;"></div>
and of course you can do it like this (recommended)
<div class="clear"></div>
and CSS
.clear{clear:both; float:none;}
.contentWrap { overflow: hidden; }
only this!
don't know if you want to float your banner
http://jsfiddle.net/flocko/fhrpghjb/
.contentWrap {
padding-bottom: 20px;
clear: both;
overflow: hidden;
}
as a rule of thumb: every element you float - you should clear in the parent element.
a clearfix class could help you on your way: http://nicolasgallagher.com/micro-clearfix-hack/