I am trying to make a box with a few sections of text. Each section will have a floating label on the left of it. However I have encountered a problem where the end of the text overflows onto the next section.
Is there a way to prevent this?
.punktBox {
width: 550px;
margin-bottom: 15px;
font-size: 1.1em;
display: flex;
flex-wrap: wrap;
}
.punktSection, .punktSectionHalf {
font-size: 1em;
padding: 2px 10px;
min-height: 24px;
display: inline-block;
width: 100%;
flex: 0 1 auto;
}
.punktSecLabel {
float: left;
height: 100%;
min-width: 100px;
font-weight: bold;
}
<div class="punktBox">
<div class="punktSection">
<div class="punktSecLabel">Desc: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i>
</div>
<div class="punktSectionHalf">
<div class="punktSecLabel">Person: </div>John Doe
</div>
<div class="punktSection">
<div class="punktSecLabel">Lorem: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
I suggest just use inline-flex and put your content inside a <p> or <div> element otherwise it will break.
.punktBox {
width: 550px;
margin-bottom: 15px;
font-size: 1.1em;
display: flex;
flex-wrap: wrap;
}
.punktSection, .punktSectionHalf {
font-size: 1em;
padding: 2px 10px;
min-height: 24px;
display: inline-flex;
width: 100%;
flex: 0 1 auto;
}
.punktSecLabel {
height: 100%;
min-width: 100px;
font-weight: bold;
}
<div class="punktBox">
<div class="punktSection">
<div class="punktSecLabel">Desc: </div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i></div>
</div>
<div class="punktSectionHalf">
<div class="punktSecLabel">Person: </div><div>John Doe</div>
</div>
<div class="punktSection">
<div class="punktSecLabel">Lorem: </div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
Instead of display: inline-block on your .punktSection and .punktSectionHalf, you're looking for display: inline-flex:
.punktBox {
width: 550px;
margin-bottom: 15px;
font-size: 1.1em;
display: flex;
flex-wrap: wrap;
}
.punktSection, .punktSectionHalf {
font-size: 1em;
padding: 2px 10px;
min-height: 24px;
display: inline-flex;
width: 100%;
flex: 0 1 auto;
}
.punktSecLabel {
float: left;
height: 100%;
min-width: 100px;
font-weight: bold;
}
<div class="punktBox">
<div class="punktSection">
<div class="punktSecLabel">Desc: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i>
</div>
<div class="punktSectionHalf">
<div class="punktSecLabel">Person: </div>John Doe
</div>
<div class="punktSection">
<div class="punktSecLabel">Lorem: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Your problem is that you had a float:left on your punktSecLabel.
Just remote it, and add a display:flex; on your punktSection. Your content must also be wrapped in a bigger div.
Hope it helps !
.punktBox {
width: 550px;
margin-bottom: 15px;
font-size: 1.1em;
display: flex;
flex-wrap: wrap;
}
.punktSection, .punktSectionHalf {
font-size: 1em;
padding: 2px 10px;
min-height: 24px;
display: inline-block;
width: 100%;
flex: 0 1 auto;
display:flex;
}
.punktSecLabel {
height: 100%;
min-width: 100px;
font-weight: bold;
}
<div class="punktBox">
<div class="punktSection">
<div class="punktSecLabel">Desc: </div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, felis id euismod lacinia, ligula sapien consequat augue, sed volutpat felis ipsum ut ipsum. In hac habitasse platea dictumst. Nunc porttitor nisl a suscipit suscipit.<i> (3 min lub mniej) </i></div>
</div>
<div class="punktSectionHalf">
<div class="punktSecLabel">Person: </div>John Doe
</div>
<div class="punktSection">
<div class="punktSecLabel">Lorem: </div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Related
I'm trying to get a layout like this picture below but I'm not doing very well.
As you can see, I'm trying to put a picture on the left and a somewhat-complicated div on the right. So far, I've been trying with float without much luck:
#image {
height: 50px;
width: 100px;
float: left;
}
#text {
float: left;
}
.column {
width: 20%;
float: left;
padding-left:10px;
}
.column::after {
clear: both
}
<div id="main_section">
<img id="image" src="http://tny.im/knQ" alt="link picture" />
<div id="text">
<h2> This is the main overhead title </h2>
<p class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id lacinia arcu. Sed risus ligula, placerat varius accumsan quis, gravida ut erat.</p>
<p class="column">Maecenas ante ex, dignissim a scelerisque euismod, fermentum at elit. Curabitur convallis, sapien sit amet facilisis interdum.</p>
<h2> This is the end of the section </h2>
</div>
</div>
Sorry to ask a trivial question, I'm googling all over and can't get this to work.
The issue is that #text takes 100% width. So it comes below the image. If you set a specific width for #text, it will float.
#text {
width: 500px;
}
Please try this once
#image {
padding-top:100px;
height: 50px;
width: 100px;
}
.column {
width: 20%;
padding-left:10px;
}
.column::after {
clear: both
}
#main_section{
display: flex;
}
.wrapper{
display: flex;
}
<div id="main_section">
<img id="image" src="http://tny.im/knQ" alt="link picture" />
<div id="text">
<h2> This is the main overhead title </h2>
<div class="wrapper"><p class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id lacinia arcu. Sed risus ligula, placerat varius accumsan quis, gravida ut erat.</p>
<p class="column">Maecenas ante ex, dignissim a scelerisque euismod, fermentum at elit. Curabitur convallis, sapien sit amet facilisis interdum.</p></div>
<h2> This is the end of the section </h2>
</div>
</div>
Can you please check the below code? Hope it will work for you. We have solved it with the help of the flex property. If you want to get two elements side by side then flex property is easy and very useful in comparison to float & it sets the flexible length on flexible items.
Please refer to this link: https://jsfiddle.net/yudizsolutions/bysj29tx/1/
.d-flex {
display: flex;
display: -webkit-flex;
}
#image {
height: auto;
align-self: flex-start;
-webkit-align-self: flex-start;
width: 100px;
flex-shrink: 0;
}
h2 {
margin-top: 0px;
}
.row {
margin: 0px -5px;
}
.column {
width: 50%;
padding: 0px 5px;
}
<div class="d-flex" id="main_section">
<img id="image" src="http://tny.im/knQ" alt="link picture" />
<div id="text">
<h2> This is the main overhead title </h2>
<div class="row d-flex">
<p class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id lacinia arcu. Sed risus ligula, placerat varius accumsan quis, gravida ut erat.</p>
<p class="column">Maecenas ante ex, dignissim a scelerisque euismod, fermentum at elit. Curabitur convallis, sapien sit amet facilisis interdum.</p>
</div>
<h2> This is the end of the section </h2>
</div>
</div>
I'm struggling to align a group of boxes in the center of my webpage when displayed on a computer screen. I'm floating the boxes left but then it's assymetrical with more space on the right. It's currently looking like this:
! https://imgur.com/a/wq0yv6S
I tried a few different alignment properties to the "boxes" and "box" classes but they didn't accomplish anything.
HTML of the section + first box and CSS:
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
width: 20%;
padding: 10px;
text-align: center;
align-self: center;
justify-content: space-around;
}
#boxes .box img {
width: 200px;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./img/foto0.jpg">
<h2>Pessoa Fisica</h2>
<p>Cuidamos da sua declaracao de imposto de renda</p>
</div>
I'd like to have those boxes positioned symmetrically.
You can use display: grid;
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
}
.grid-item {
background: #F7F7F7;
padding: 1em;
text-align: center;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
You could use flexbox,
it's very easy to start with,
you need to implement this CSS code to the parent container which you need its children to be aligned in someway
.container{
display: flex;
justify-content: center;
align-items: center;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./img/foto0.jpg">
<h2>Pessoa Fisica</h2>
<p>Cuidamos da sua declaracao de imposto de renda</p>
</div>
What you're trying to achieve is not too hard with flexbox. See the following demo for an example. If you have any questions please ask :).
Note: The .site div is not needed but added for reference.
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 960px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.box {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.site {
border: 1px solid red;
}
img {
max-width: 100%;
height: auto;
}
<div class="site">
<div class="container">
<div class="row">
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
</div>
</div>
</div>
In the below code, I want all the three boxes to have same height and also the links in the three boxes should be in same line as shown in the screenshot below. I have used flexbox for doing this. Please help.
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
Remove align-items: flex-start; from the wrapper, give the div display: flex; flex-direction: column;, and set margin-top: auto on the links
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
display: flex; /* added property */
flex-direction: column; /* added property */
}
.wrapper div a { /* added rule */
margin-top: auto;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
.wrapper {
display: flex;
flex-direction: row;
justify-content: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
display: flex;
flex-basis: 33%;
flex-direction: column;
justify-content: space-between;
text-align: center;
padding: 10px 4%;
}
.wrapper div a {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: flex-end;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
I want to have two stacked divs on one side, and then have a single column on the other side with the same height as the left divs.
Kind of like this:
I have the two divs and a side bar, but the two divs won't stack.
Here is what I have so far Fiddle
#import url(https://fonts.googleapis.com/css?family=Oxygen);
body {
background-color: #222;
}
.description h1 {
text-align: left;
padding: 20px;
}
#wrapper {
text-align: center;
}
.description,
.sidebar,
.demo-container {
display: inline-block;
vertical-align: top;
}
.description {
background: #eee;
width: 50%;
font-family: "Oxygen";
font-size: 14px;
color: #000;
line-height: 1.2;
}
.sidebar {
background: #eee;
width: 15%;
height: 575px;
}
.demo-container {
background: #eee;
width: 50%;
font-family: "Oxygen";
font-size: 14px;
color: #000;
line-height: 1.2;
}
<div id='wrapper'>
<div class="demo-container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
</div>
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
</div>
<div class="sidebar">
</div>
</div>
you are complicating a lot, here is a basic demo of what you want using flexbox
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0
}
.flex {
display: flex;
flex-basis: 100%
}
.fl {
flex: 1;
display: flex;
flex-direction: column;
margin: 0 5px;
justify-content: space-between
}
.flex-item {
border: 1px solid black
}
.flex-item:not(:first-of-type) {
margin: 10px 0 0
}
.sidebar {
border: 1px solid black;
}
<div class="flex">
<div class="fl">
<div class="flex-item">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit</p>
</div>
<div class="flex-item">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit
ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus.
Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.</p>
</div>
</div>
<div class="fl sidebar"></div>
</div>
Just put <div class="sidebar"></div> before the other two divs, then float them all right. See fiddle https://jsfiddle.net/y71tkmtw/1/
.description,
.sidebar, .demo-container {
float: right;
margin: 40px;
}
Just add another <div> surrounding the 2 divs on the left-hand side, with float:left. Add float:right to the sidebar.
.left-container
{
width: 85%;
float:left;
}
.sidebar {
background: #eee;
width: 15%;
height: 575px;
float:right;
}
Fiddle: https://jsfiddle.net/dncgytef/2/
I'm trying to align a block of text so it looks like in the image. However, without acceptable result. The text is located in the floating div which is repeating. Same divisions are floating next to each other.
My HTML code:
<div id="bottomPanel">
<div class="bottomItem">
<img src="image.png" alt="mouse" class="imgBottom">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
My CSS code:
#bottomPanel {
float: left;
width: 100%;
text-align: center;
}
.bottomItem {
float: left;
width: 100%;
margin-top: 10px;
background-color: #e6e6e6;
}
.imgBottom {
float: left;
padding-top: 25px;
padding-left: 14px;
}
.item_bottomDesc {
float: left;
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #133855;
padding-top: 42px;
padding-left: 18px;
display: block;
}
.item_bottomAbout {
float: left;
font-family: Arial;
font-size: 12px;
width: 376px;
height: auto;
text-align: justify;
display: block;
padding-top: 50px;
color: #7b7a79;
}
This is how the elements should look like:
The text I can't align properly is the long one.
Division has 100% width which is approx. 774px. bottomPanel is a div where all floating .bottomItem are located.
Any ideas?
So not much wrong here overall. Just that you have a few extra things you don't need.
Namely, bottomDesc and bottomAbout do not need to be floated, and the padding-top for those two elements need adjusting too.
I have also added an explicit width/height for the image, feel free to adjust as needed but it's a good idea to define it. I also replaced its padding with appropriate margins.
Finally, I removed the #bottomPanel styles altogether - again float is not needed here, and width:100% is default anyway. Also, the text-align:center was unnecessary.
Here's the revised code for you to look at:
.bottomItem {
float: left;
width: 100%;
margin-top: 10px;
background-color: #e6e6e6;
}
.imgBottom {
float: left;
margin: 14px;
width: 100px;
height: 100px;
}
.item_bottomDesc {
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #133855;
padding-top: 14px;
padding-left: 18px;
display: block;
}
.item_bottomAbout {
font-family: Arial;
font-size: 12px;
width: 376px;
height: auto;
text-align: justify;
display: block;
}
<div id="bottomPanel">
<div class="bottomItem">
<img src="http://placehold.it/100x100" alt="mouse" class="imgBottom">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
Instead of float i suggest you use flexbox for this, and you dont have to use padding to get vertical align.
.bottomItem {
display: flex;
flex-direction: row;
align-items: center;
margin: 10px;
}
.right {
max-width: 60%;
margin: 0 10px;
}
<div id="bottomPanel">
<div class="bottomItem">
<img src="http://placehold.it/150x150">
<div class="right">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
<div class="bottomItem">
<img src="http://placehold.it/150x150">
<div class="right">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
<div class="bottomItem">
<img src="http://placehold.it/150x150">
<div class="right">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
</div