I am trying to vertically align content inside of a block - the content is an image on left (no text under it) and a paragraph of text.
When the text is on a large screen, the height of the paragraph is smaller than the height of the image and thus the paragraph should be vertically aligned to middle. On the other hand, while the content is displayed on smaller screen, the paragraph's height is bigger than the image and the image should be vertically aligned.
Centering the image is easy, because I know the height, but how to handle responsive paragraph? Everything i have tried resulted in some weird behavior - for example blocks overlapping each other when on a small screen. So I start to thing that its not possible by CSS and I need some Javascript for it.
HTML:
<div class="entry">
<img src="http://placehold.it/100x100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis. </p>
</div>
<div class="entry">
<img src="http://placehold.it/100x100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis.</p>
</div>
CSS:
div.entry {
margin-bottom: 10px;
min-height: 100px;
padding: 0 10px 0 120px;
position: relative;
}
div.entry img {
bottom: 0;
left: 0;
margin: auto 0;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
The example can be found here: http://jsfiddle.net/46psK/2583/
Solved using Flexible box method. Set the parent container as flex and align the items inside to be centered along the cross-axis
div.entry {
margin-bottom: 10px;
min-height: 100px;
padding: 0 10px 0 120px;
position: relative;
display: flex;
align-items: center;
}
div.entry img {
bottom: 0;
left: 0;
margin: auto 0;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
<div class="entry">
<img src="http://placehold.it/100x100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis.</p>
</div>
<div class="entry">
<img src="http://placehold.it/100x100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis.</p>
</div>
Try using display: table-cell. The modified css is as below.
div.entry {
margin-bottom: 10px;
min-height: 100px;
padding: 0 10px;
display: table;
}
div.entry img, div.entry p {
display: table-cell;
vertical-align: middle;
}
div.entry img {
margin:0 10px 0 0;
width: 100px;
}
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 trying to design a section of HTML/CSS wherein I have a flexbox parent element that is the width and height of the starting viewport with 3 child text boxes.
My goal is to have all 3 elements on the page and visible without needing to scroll.
My goal is to have all 3 text boxes be legible and resize accordingly to the given viewport without getting shoved out.
Looking at the HTML, it seems the content is shoved off the viewport to the right despite trying to keep the width at 100%. Basically, how can I have 3 easily modifiable flexbox that stay legible and within the width and height of the viewport no matter what changes are made to them?
My code:
.intro_header {
display: flex;
width: 100%;
padding: 10% 10% 5% 10%;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
flex-wrap: wrap;
justify-content: space-between;
}
/* Generic flexbox paragraph text div that can be used for one column display regardless of responsiveness */
/*can swap around elements using the order: style */
.oneColumnText {
width: 100%;
text-align: center;
}
<div class="intro_header" style="background-image: foo.jpg">
<div class="oneColumnText">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="oneColumnText">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="oneColumnText">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales nulla sed fermentum tempor. Maecenas eget posuere massa. Sed consequat, erat ac tincidunt porttitor, augue sapien feugiat ligula, id ultricies augue tortor id mauris. Duis mattis
felis non libero iaculis, nec varius turpis pharetra. Vivamus convallis nibh ac arcu condimentum porta. Ut tristique in erat quis lobortis. Etiam ut elit in sem placerat dapibus.
</p>
</div>
</div>
https://jsfiddle.net/eg14v3po/1/
Add this to your code:
* { box-sizing: border-box; }
body { margin: 0; }
.intro_header {
display: flex;
padding: 10% 10% 5% 10%;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
flex-wrap: wrap;
justify-content: space-between;
}
.oneColumnText {
width: 100%;
text-align: center;
}
* { box-sizing: border-box; }
body { margin: 0; }
.oneColumnText {
border-bottom: 1px solid lightgray; /* for demo only */
}
<div class="intro_header" style="background-image: foo.jpg">
<div class="oneColumnText">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="oneColumnText">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="oneColumnText">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales nulla sed fermentum tempor. Maecenas eget posuere massa. Sed consequat, erat ac tincidunt porttitor, augue sapien feugiat ligula, id ultricies augue tortor id mauris. Duis mattis
felis non libero iaculis, nec varius turpis pharetra. Vivamus convallis nibh ac arcu condimentum porta. Ut tristique in erat quis lobortis. Etiam ut elit in sem placerat dapibus.
</p>
</div>
</div>
With the border-box value of the box-sizing property, the padding you have specified gets factored into the width / height calculations (more details).
With margin: 0 on the body element you are overriding the default margins set by the browser (more details).
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 setup a section of my page with 3 columns using Flexbox.
The 3 columns are set up just fine, the issue I am having is with the section1 div not being as tall as the children elements.
I have tried height: auto, height:100%, overflow: auto, overflow:visible, etc. The only time the section1 div changes height is when I specifically state a pixel height. It seems as though the flexbox items are acting as floats so I tried a clear:both to no avail.
I have searched both stackoverflow and other sites and have not found an answer which leads me to believe it is something I am doing wrong with flexbox.
body {
background: lightgrey;
}
.body {
position: relative;
width: 75% /* 747.75px */;
margin: auto;
top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
display: block;
position: relative;
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
left: 2.5%;
}
.section1 {
position: relative;
display: flex;
justify-content: space-around;
top: 5em;
height: auto;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>
See Relative positioning
Once a box has been laid out according to the normal flow or
floated, it may be shifted relative to this position. This is called
relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1
were not offset and B2 is not re-positioned after B1's offset is
applied. This implies that relative positioning may cause boxes to
overlap.
Here you don't want to shift a single box, you want it to push following content too. Then, you should use margins for that.
body {
background: lightgrey;
}
.body {
width: 75% /* 747.75px */;
margin: auto;
margin-top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
margin-left: 2.5%;
}
.section1 {
display: flex;
justify-content: space-around;
margin-top: 5em;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>
In the follwing example the text goes out of the box. And when I reduce the size of the borowser the size of the boxes shring resposively but the text becomes mixed and unorganized. How can solve this?
<html>
<head>
<meta charset="utf-8">
<title>This is an email template</title>
<style>
body {
background-color: rgba(79, 183, 227, 0.4);
direction: rtl;
}
body * {
font-family: Tahoma;
}
a:link {
text-decoration: none;
margin-right: 25px;
color: #46B1F9;
}
#wrap {
background-color: #e0f2f6;
margin: auto;
width: 75%;
padding: 15px;
border: 1px solid grey;
}
.item {
border: 1px solid #95A5A6;
border-radius: 5px;
margin-bottom: 25px;
width: 60%;
display: inline-block;
}
.item p {
font-size: 1em;
}
.item img {
float: left;
width: 30%;
}
.item .notice {
text-align: center;
float: right;
padding-top: 25px;
padding-right: 25px;
width: 50%;
height: 1em;
}
/*clearfixes*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="wrap">
<div style="padding:15px;">
<div class="item clearfix">
<div class="notice">
<p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s14.postimg.org/wqzq39iht/image.jpg" alt="" />
</div>
<div class="item clearfix">
<div class="notice">
<p>
<strong>اLorem ipsum</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s10.postimg.org/y4kk17q21/image.jpg" alt="" />
</div>
<div class="item clearfix">
<div class="notice">
<p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s3.postimg.org/xca6ju1kj/image.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you are trying to expand the block by content, removing height from .item .notice should fix the issue.
In all cases your text will overflow the box , so you should add overflow:scroll to notice class
Depends on what you are trying to do.
If the boxes must be a fixed height there are couple of different strategies.
The easiest thing to do is to turn off the height restriction to the notice class. However, this will reflow your document and push everything down.
On the other hand, if you want to keep the current layout, I cannot provide you a unilateral decision as the padding, height and overflow will conflict with each other on this element.