Its taking me hours without success.
Im trying to create a layout: Code example
html,
body {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.MyNavbar {
height: 30px;
background-color: red;
}
.Main {
height: -webkit-calc(100% - 30px);
height: -moz-calc(100% - 30px);
height: calc(100% - 30px);
}
.Main:after {
content: "";
display: table;
clear: both;
}
.Sidebar {
height: 100%;
width: 10%;
float: left;
background-color: yellow;
}
.Content {
height: 90%;
width: 90%;
background-color: #e8e8e8;
float: left;
}
.ContentHeader {
height: 30px;
width: 100%;
background-color: blue;
}
.ContentData {
background-color: lightblue;
/*margin-top: 10px; */
height: calc(100% - 30px);
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<body>
<script src="src/index.js"></script>
<div style="height: 100vh;">
<div class="MyNavbar">myNavbar</div>
<div class="Main">
<div class="Sidebar">
Sidebar
</div>
<div class="Content">
<div class="ContentHeader">
ContentHeader
</div>
<div class="ContentData">
ContentData<br /><br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<h3>End of ContentData</h3>
</div>
</div>
</div>
</div>
</body>
</html>
The ContentData section should take all the space until the bottom of the display. If there is too much content, the scrollbar of that section should allow viewing the rest of the content.
But Im not able to:
- make the scroll bar work. It keeps greyed out.
- If there is no content (by removing the "Lorem Ipsums") content data does not take all the height i want to fill the display size.
Any help? Thanks!
You need to remove comment from following code.
.Content {
/*height: 90%;*/
width: 90%;
background-color: #e8e8e8;
float: left;
}
html,
body {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.MyNavbar {
height: 30px;
background-color: red;
}
.Main {
height: -webkit-calc(100% - 30px);
height: -moz-calc(100% - 30px);
height: calc(100% - 30px);
}
.Main:after {
content: "";
display: table;
clear: both;
}
.Sidebar {
height: 100%;
width: 10%;
float: left;
background-color: yellow;
}
.Content {
height:100%;
width: 90%;
background-color: #e8e8e8;
float: left;
}
.ContentHeader {
height: 30px;
width: 100%;
background-color: blue;
}
.ContentData {
background-color: lightblue;
/*margin-top: 10px; */
height: calc(100% - 30px);
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<body>
<script src="src/index.js"></script>
<div style="height: 100vh;">
<div class="MyNavbar">myNavbar</div>
<div class="Main">
<div class="Sidebar">
Sidebar
</div>
<div class="Content">
<div class="ContentHeader">
ContentHeader
</div>
<div class="ContentData">
ContentData<br /><br />
<h3>End of ContentData</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have a design with one large svg and three divs with text, absolutely positioned with CSS. I need the divs to keep their position in relation to the svg regardless of what the screen size is. That is, I want the text blocks to always stay aligned with the "branches". How do I do that?
Link to Codepen
div {
text-align: center;
position: relative;
}
.box-1,
.box-2,
.box-3 {
position: absolute;
width: 200px;
text-align: left;
}
.box-1 {
top: 50px;
left: 33%;
}
.box-2 {
top: 650px;
left: 52%;
}
.box-3 {
top: 1210px;
left: 36%;
}
.left {
text-align: right;
}
<div>
<svg
width="185"
height="1668"
fill="none"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M39.5 1665c-19.95 2.85 41.323-1.26 64.771-2.89 3.419-.23 5.362-4.82 4.327-8.09-14.809-46.76 97.758-206.14 69.902-341.52-11.147-54.17-45.229-110.52-81-155.5-29.944-37.66-66.9-57.98-80.5-113-4.3-17.39-7.5-61 0-101 7.48-39.898 75.652-305.146 75.999-306.495l.004-.017c.299-1.343 25.703-115.554 35.497-210.988 17.272-168.304-21.4-281.623-76.296-423C95.73 126.455 138.393 276.328 117 463.5c-15.937 139.438-77.961 332.565-86.5 368-18.986 129-54 199 5.5 271.5s115.046 146.4 126 209.5c27.348 157.54-98 349-122.5 352.5z"
fill="#EAECF0"
stroke="#E9EBEF"
strokeWidth="4"
strokeLinejoin="round"
/>
<path
d="M82 1252.94c29.227 11.7 82.878 10.06 82.878 49.65l-3.649 7.89C155 1269.5 95.918 1268.2 82 1252.94zM53.699 105.984c19.085 10.888 35.112 33.394 49.806 52.952v-15.085c-5.59-14.883-38.466-35.764-49.806-42.914-4.816-3.037-14.605-3.284 0 5.047zM78.5 715c-10.345 8.248-21.099 16.711-23.44 30.98l2.968 8.728C64 730.258 97.5 707 111.234 699.579 100.824 702.026 87.1 708.144 78.5 715z"
fill="#E9EBEF"
/>
</svg>
<div class="box-1 left">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="box-2">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="box-3 left">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
</div>
Your text is positioned towards the left edge of the surrounding div in percent. If you wan to svg to behave the same, you have to position it as well.
I added css that does that. The main rationale is to treat the elements that are supposed to behave the same the same way.
Update:
You can use padding on the .text-box elements to influence the position of the text. Again, the box is positioned in the exact way as the svg (by percentage of the viewport width). To fine tune the position on in relation to the svg canvas, use something that adds a fixed offset to the percentage wise positioning.
(The .inner elements are only there to display the padding with a background. You can remove them when you're doing this.)
.container {
position: relative;
}
.text-box,
svg {
position: absolute;
left: 33%;
}
svg {
border: 1px solid red;
}
.text-box {
width: 200px;
text-align: right;
border: 1px solid green;
}
.text-box .inner {
background: rgba(255, 255, 0, 0.1);
}
.box-1 {
top: 50px;
padding-left: 20px;
}
.box-2 {
top: 650px;
padding-left: 40px;
}
.box-3 {
top: 1210px;
padding-left: 60px;
}
<div class="container"> <svg width="185" height="1668" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<path
d="M39.5 1665c-19.95 2.85 41.323-1.26 64.771-2.89 3.419-.23 5.362-4.82 4.327-8.09-14.809-46.76 97.758-206.14 69.902-341.52-11.147-54.17-45.229-110.52-81-155.5-29.944-37.66-66.9-57.98-80.5-113-4.3-17.39-7.5-61 0-101 7.48-39.898 75.652-305.146 75.999-306.495l.004-.017c.299-1.343 25.703-115.554 35.497-210.988 17.272-168.304-21.4-281.623-76.296-423C95.73 126.455 138.393 276.328 117 463.5c-15.937 139.438-77.961 332.565-86.5 368-18.986 129-54 199 5.5 271.5s115.046 146.4 126 209.5c27.348 157.54-98 349-122.5 352.5z"
fill="#EAECF0"
stroke="#E9EBEF"
strokeWidth="4"
strokeLinejoin="round"
/>
<path d="M82 1252.94c29.227 11.7 82.878 10.06 82.878 49.65l-3.649 7.89C155 1269.5 95.918 1268.2 82 1252.94zM53.699 105.984c19.085 10.888 35.112 33.394 49.806 52.952v-15.085c-5.59-14.883-38.466-35.764-49.806-42.914-4.816-3.037-14.605-3.284 0 5.047zM78.5 715c-10.345 8.248-21.099 16.711-23.44 30.98l2.968 8.728C64 730.258 97.5 707 111.234 699.579 100.824 702.026 87.1 708.144 78.5 715z"
fill="#E9EBEF"
/>
</svg>
<div class="text-box box-1 left">
<div class="inner">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>20px padding to the left</p>
</div>
</div>
<div class="text-box box-2">
<div class="inner">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>40px padding to the left</p>
</div>
</div>
<div class="text-box box-3 left">
<div class="inner">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>60px padding to the left</p>
</div>
</div>
</div>
I've been working on an image gallery using flexbox with a flex-basis transition to grow and shrink the elements on hover. I am having a problem adapting the gallery to use flex-wrap to break to the next row after the 5th element.
The way I'm hoping for it to function is that each row has 5 elements that grow and shrink on the same row. After the a sixth element is placed in the container I want to break to the next row and have the elements continue functioning as expected (transitions included).
Elements stretch to fill available space (width of 20% for each of the 5 elements)
-> On hover, the other elements shrink 5% for a total of 20%
Hovered element grows to 40%
Sixth element that moves to next row inherits the size of the available space
Seventh element takes up 50% of row, eighth 33.3%...ect.
This is what I currently have: https://codepen.io/TommyBoyLab/pen/YdzGjB
(adapted from: https://codepen.io/joliveras/pen/GpLVKv)
HTML of element:
<div class="container">
<div class="item" style="background:url() center/cover">
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.container .item {
display: grid;
position: relative;
flex: 1;
transition: 500ms;
min-width: 15%;
max-width: 20%;
height: 50vh;
}
.container .item:hover {
transition: 500ms;
max-width: 40%;
flex-grow: 1;
}
.container .content {
margin: auto;
font-size: 1.5em;
}
It seems you only need to increase the value of flex-grow on hover:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.container .item {
display: grid;
position: relative;
flex: 1;
transition: 500ms;
min-width: 15%;
max-width: 20%;
height: 50vh;
}
.container .item:hover {
transition: 500ms;
max-width: 40%;
flex-grow: 5;
}
.container .content {
margin: auto;
font-size: 1.5em;
}
<div class="container">
<div class="item" style="background:url(https://images.unsplash.com/photo-1544227966-c89fe5bc0904?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1644&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544090372-c1fe7f8dee5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544227966-c89fe5bc0904?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1644&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544090372-c1fe7f8dee5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544227966-c89fe5bc0904?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1644&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544090372-c1fe7f8dee5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
</div>
Addition to CSS:
.item:first-child:nth-last-child(n + 5),
.item:first-child:nth-last-child(n + 5) ~ *{
min-width: 17%;
}
The bb class background colour would be red if I move the code before the intro-block class css codes , however if I put it after the intro-block class css codes the colour is not changing and nothing happens!
Could anyone tell me why this happens?!
.left-column {
width: 35%;
margin-left: 20px;
margin-right: 50px;
float: left;
overflow: hidden;
}
.right-column {
overflow: hidden;
}
.intro-block {
background-color: #22AAA1;
margin: 0 auto;
/*max-width: 950px;*/}
}
.bb {
background-color: red;
}
<body>
<header>
<section class="intro-block">
<div class="left-column">
<img class="profile-pic right-column" src="img/11.jpg">
</div>
<div class="right-column">
<h1>lorem ipsum</h1>
<p>
<h4>lorem ipsum</h4>
</p>
</div>
</section>
</header>
<main>
<section class="bb">
<h3>lorem ipsum</h3>
<div class="left-column">
<div>
<p>lorem ipsum</p>
</div>
</div>
<div class="right-column">
<h5>lorem ipsum</h5>
</div>
You have an extra } just before .bb {}
Note: don't wrap headings (h1 to h6) in p
You should indent/tidy your code for better reading and with that you will find this mistakes easily
.left-column {
width: 35%;
margin-left: 20px;
margin-right: 50px;
float: left;
overflow: hidden;
}
.right-column {
overflow: hidden;
}
.intro-block {
background-color: #22AAA1;
margin: 0 auto;
/*max-width: 950px;*/
}
.bb {
background-color: red;
}
<body>
<header>
<section class="intro-block">
<div class="left-column">
<img class="profile-pic right-column" src="img/11.jpg">
</div>
<div class="right-column">
<h1>lorem ipsum</h1>
<h4>lorem ipsum</h4>
</div>
</section>
</header>
<main>
<section class="bb">
<h3>lorem ipsum</h3>
<div class="left-column">
<div>
<p>lorem ipsum</p>
</div>
</div>
<div class="right-column">
<h5>lorem ipsum</h5>
</div>
</section>
</main>
/max-width: 950px;/}
you have an extra } after the quoted line that messes up with the following rules ...
I have tried to assign a 100% of the parent to a fixed div but is taking the 100% of the screen.
I prepared the code here
http://codepen.io/rodboc/pen/ZOOEWp
HTML
<div id="wrapper">
<div class="box">
<div class="header">
<p>Header</p>
</div>
<div class="content">
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
</div>
</div>
</div>
CSS
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
padding: 10px;
}
#wrapper .box {
width: 100%;
}
#wrapper .header {
width: inherit;
position: fixed;
background: #2ecc71;
}
#wrapper .content {
width: inherit;
background: #27ae60;
}
if a define the width for the parent in px works, but I can't do that, should be in 100%
It's pretty simple actually, move the header outside the box div.
body, html {
margin: 0;
width: 100%
}
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
padding: 10px;
}
#wrapper .box {
background: lime;
}
#wrapper .header {
width: inherit;
position: fixed;
background: #2ecc71;
}
#wrapper .content {
background: #27ae60;
}
<div id="wrapper">
<div class="header">
<p>Header</p>
</div>
<div class="box">
<div class="content">
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
</div>
</div>
</div>
body, html {
width: 100%
}
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
}
#wrapper .box {
width: 100%;
max-width: 238px;
margin: 10px;
background: lime;
}
#wrapper .header {
width: 100%;
position: fixed;
background: #2ecc71;
max-width: inherit;
}
#wrapper .content {
width: 100%;
background: #27ae60;
}
<div id="wrapper">
<div class="box">
<div class="header">
<p>Header</p>
</div>
<div class="content">
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
<p>Content here Lorem Ipsum</p>
</div>
</div>
</div>
Fixed position elements is not relative with its parent anymore.
Based on the documentation :
position:fixed MDN
Fixed Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page. This value always create a new stacking context.
One way to fix this is to the max-width of parent and let the child inherit it.
So in your case it should be the same on the snippet i attached.
This might solve your issue, change the styling of the header class like this:
#wrapper .header {
width: 100%;
position: fixed;
background: #2ecc71;
max-width:calc(100% / 3);
}
Check out if it could do for you:
http://output.jsbin.com/jaxasikose/
Okay here is how you fix it with a clean code:
#wrapper {
width: calc(100% / 3);
height: 900px;
background: #ecf0f1;
margin: 0 auto;
padding: 10px;
}
#wrapper .box {
width: 100%;
position: relative;
}
#wrapper .header {
width: 100%;
position: absolute;
background: #2ecc71;
}
#wrapper .content {
width: 100%;
overflow: auto;
background: #27ae60;
}
I want to center an floated image and a container (paragraph + heading):
.row {
display: block;
/* width: 100%; */
}
.left {
float: left;
}
.right {
float: right;
}
<div class="row">
<div class="container">
<img class="right" src="" width="300" height="300" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
<div class="row">
<div class="container">
<img class="left" src="" width="300" height="156" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
Here is also a live version of the problem. I have cleared the floats but now I can't center the .img and .container element. What would you slove the problem?
You have no luck with floated elements since they don't obey vertical-align. You can instead use display: table-cell along with vertical-align: middle and that would work perfectly. Albeit you will need to modify your HTML structure a little bit to place the content first before the image and vice versa depending on the way you want the content and images to appear on the front-end.
.container {
display: table;
}
.content {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image img {
width: 100%;
}
<div class="row">
<div class="container">
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
Basically what you can do to vertically align text is change the display of the container to table then the paragraph to table-cell and then set the vertical-align to middle looking like this:
.row {
display: table;
overflow: hidden;
}
.left, .right {
display: table-cell;
vertical-align: middle;
}
You might also need to set overflow to hidden on the container so that the height is maintained because of the floats.