Margins and vertical alignment of image inside div - html

I'm trying to create a div with content inside containing an image to the left and text to the right. I'm able to set the margins correctly and the left alignment correctly for the text, however, the image is not vertically aligned and the margins fall off on the right when viewed in the responsive stacked view.
body {
position: relative;
height: 100vh;
margin: 40px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
}
.wrapper div {
min-height: 150px;
overflow: hidden;
}
#one {
background-color: white;
float: left;
margin: 10px 20px 10px 10px;
width: 200px;
white-space: nowrap;
text-align: center;
line-height: 100px;
}
#one img {
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#two {
background-color: white;
overflow: hidden;
margin: 10px;
min-height: 100px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 0;
width: auto;
border: 0;
}
}
<body>
<div class="wrapper">
<div id="one">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</body>

I added
height:100%;
display:flex;
align-items:center;
justify-content:center;
to #one
body {
position: relative;
height: 100vh;
margin: 40px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
}
.wrapper div {
min-height: 150px;
overflow: hidden;
}
#one {
background-color: white;
float: left;
margin: 10px 20px 10px 10px;
width: 200px;
white-space: nowrap;
text-align: center;
line-height: 100px;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
#one img {
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#two {
background-color: white;
overflow: hidden;
margin: 10px;
min-height: 100px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 0;
width: auto;
border: 0;
}
}
<body>
<div class="wrapper">
<div id="one">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</body>

Related

Ensure image, header, paragraph and button remain level, with different length size for header and paragraph

What I am trying to achieve is all images the same level, all headers and paragraphs level no matter what length they are and a button after which as all in the same level... I am also trying to make a 9x9 grid, but as soon as I add more columns they start going next to each other not by the underneath...
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container .box {
width: 50%;
margin: 10px;
text-align: center;
}
.container {
padding-top: 30px;
height: 300px;
text-align: center;
min-width: 280px;
height: 100%;
margin-left: 100px;
margin-right: 100px;
display: flex;
justify-content: space-between;
}
.box h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
text-align: center;
padding-left: 25px;
padding-right: 25px;
}
.box p {
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
text-align: center;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.column {
text-align: center;
float: left;
width: 50%;
}
}
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.3s;
/* Safari */
transition-duration: 0.3s;
cursor: pointer;
}
.button {
background-color: white;
color: black;
border: 2px solid #008CBA;
text-align: center;
padding-bottom: 20px;
width: 50%;
margin: auto;
align-self: flex-end;
}
.button:hover {
background-color: #008CBA;
color: white;
}
<div class="container">
<div class="flex-container">
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2>Example Header</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. </p>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2>Longer example of a header blah </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper.</p>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2>another short example </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper. Proin est ipsum, rutrum ac est ut, mollis mollis elit. Curabitur eget dolor gravida, rhoncus arcu eget,
rhoncus ante. Nulla rhoncus in mauris et consequat. </p>
<div>
Learn more
</div>
</div>
</div>
This is currently the best I have, I've got all images and header and text to be the same level but as soon as I have the buttons in level the headers or paragraphs wont be level... Any help on this would be amazing!
If you are ok to set some heights and some overflow: hidden; you could do this:
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container .box {
width: 50%;
margin: 10px;
text-align: center;
}
.container {
padding-top: 30px;
height: 300px;
text-align: center;
min-width: 280px;
height: 100%;
margin-left: 100px;
margin-right: 100px;
display: flex;
justify-content: space-between;
}
.box h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
text-align: center;
padding-left: 25px;
padding-right: 25px;
/* ! */
overflow: hidden;
height: 3.6em;
}
.box p {
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
text-align: center;
padding-left: 25px;
padding-right: 25px;
margin-bottom: 40px;
/* ! */
overflow: hidden;
height: 12.6em;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.column {
text-align: center;
float: left;
width: 50%;
}
}
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.3s;
/* Safari */
transition-duration: 0.3s;
cursor: pointer;
}
.button {
background-color: white;
color: black;
border: 2px solid #008CBA;
text-align: center;
padding-bottom: 20px;
width: 50%;
margin: auto;
align-self: flex-end;
}
.button:hover {
background-color: #008CBA;
color: white;
}
/* ! */
.fade {
position: relative;
height: 3.6em;
}
/* ! */
.fade:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.2em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
<div class="container">
<div class="flex-container">
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<div>
<h2 class="fade">Example Header</h2>
<p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. </p>
</div>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2 class="fade">Longer example of a header blah blah blah </h2>
<p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper.</p>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2 class="fade">another short example </h2>
<p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper. Proin est ipsum, rutrum ac est ut, mollis mollis elit. Curabitur eget dolor gravida, rhoncus arcu eget,
rhoncus ante. Nulla rhoncus in mauris et consequat. </p>
<div>
Learn more
</div>
</div>
</div>
Flow fade thing is from here where you can also find some other approaches to your problem. Hope this helps.

CSS - Background color oversizing / covering paragraph text rather than just h3

I'm trying to set a background color for a h3 which is at the bottom of a paragraph however the color is covering both the heading and the paragraph text when I just want it to cover the h3. Not sure why its oversizing like that rather than just wrapping around the h3.
This is how I've done it -
section.council {
height: 350px;
max-width: 100%;
position: relative;
background-color: #F0F0F0;
}
.council h2 {
text-align: left;
margin-top: 30px;
line-height: 5px;
font-size: 20px;
color: #000000;
}
.council p {
font-size: 10px;
color: black;
float: left;
margin-top: 20px;
margin-right: 50px;
}
.readmore h3 {
color: #FFFFFF;
font-size: 15px;
text-align: center;
background-color: #00BFFF;
}
<div class="row">
<h4>LATEST CASE STUDY</h4>
<div class="six columns">
<h2>Wakefield Council</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci.
<br> Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi.
</p>
<div class="readmore">
<h3>READ MORE</h3>
</div>
</div>
</div>
Is your problem just the fact that h3 as a block element by default goes over the whole width …?
Well then just make it inline or inline-block, and move text-align to the parent element to center it:
section.council {
height: 350px;
max-width: 100%;
position: relative;
background-color: #F0F0F0;
}
.council h2 {
text-align: left;
margin-top: 30px;
line-height: 5px;
font-size: 20px;
color: #000000;
}
.council p {
font-size: 10px;
color: black;
float: left;
margin-top: 20px;
margin-right: 50px;
}
.readmore {
text-align:center;
}
.readmore h3 {
display: inline-block;
color: #FFFFFF;
font-size: 15px;
background-color: #00BFFF;
}
<div class="row">
<h4>LATEST CASE STUDY</h4>
<div class="six columns">
<h2>Wakefield Council</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci.
<br> Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi.
</p>
<div class="readmore">
<h3>READ MORE</h3>
</div>
</div>
</div>
If you want it to look more button-y, then add a bit of padding as well.

Responsive 4 Column web layout HTML CSS DIVs

I am looking to build a simple website but I cannot seem to get the layout correct. Below are some images of what I am shooting for as well as my code.
Question: Does every column(4 total) become its own div. Is each row a div? Is each item a div? I am confused on that. Also wondering how containers and wrappers would apply here.
Code below.
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
.header, .footer {
padding: 5px;
color: white;
background-color: black;
clear: left;
text-align: center;
}
.aboutus {
float:right;
margin: 5px;
padding: 5px;
width: 25%;
height: auto;
border: 1px solid black;
background-color:#123;
}
.aboutimage {
float:left;
margin: 5px;
padding: 5px;
width: 25%;
height: auto;
border: 1px solid black;
background-color:#123;
}
.about {
margin: 5px;
padding: 5px;
width: 100%;
height: 25%;
border: 1px solid black;
background-color:#989
}
.specials {
float: left;
margin: 10px;
padding: 10px;
width: 100%;
height: 300px;
border: 1px solid black;
background-color:#800;
}
.special1, .special2, .special3, .special4 {
margin: 1px;
padding: 1px;
width: 25%;
height: 50px;
border: 1px solid black;
background-color:#800;
}
.hours, .location {
margin: 5px;
padding: 5px;
width: 50%;
height: 150px;
border: 1px solid black;
background-color:#950;
}
.container{
float: center;
margin: auto;
padding: 10px;
width: 100%;
max-width: 1500px;
height: 1068px;
border: 1px solid red;
}
.logistics{
margin:1px;
padding:1px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<p>Restaurant</p>
<p>A family restaurant</p>
<span>This is some text that is going to span this div.</span>
</div>
<div class="about">
<div class="aboutus">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
<div class="aboutimage">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
</div>
<div class="specials">
<div class="chicken">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
<div class="pork">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
</div>
<div class="section group">
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
</div>
<div class="logistics">
<div class="hours">
<h2>Hours of operation</h2>
<p>Monday through Sunday</p>
<p>7:00 AM - 7:00 PM</p>
</div>
<div class="location">
<h2>Location</h2>
<p></p>
<p></p>
</div>
</div>
<div class="footer">Copyright © KR</footer> </div>
</body>
</html>
To better understand how grid / divs / layout works maybe looking into Bootstrap documentation about Grids will help you. http://getbootstrap.com/css/#grid
Usually you have a .row that has .col (columns), like this:
<div class="row">
<div class="col-md-3">25% of the row</div>
<div class="col-md-3">25% of the row</div>
<div class="col-md-3">25% of the row</div>
<div class="col-md-3">25% of the row</div>
</div>
Yes. To accomplish the responsive behavior the columns must be each one an independent div. But, why don't you use Bootstrap or Foundation or some other CSS framework. Instead of trying to reinvent the wheel just use an existing one. Those frameworks will do the work for you.

Stack divs vertically & keep 2 column layout

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/

Practicing HTML+CSS, having problems with positioning elements

I am trying to make a decent layout on my page, I have menu, content section and a footer.
I divided menu/content/section in half and put some text/images there. I am trying to position images in the middle of the div.
* {
box-sizing: border-box;
}
.clear {
clear: both;
}
.mainWidth {
width: 900px;
margin: 0 auto;
border: 2px solid pink;
}
.menu {
width: 100%;
height: 20%;
border: 1px solid blue;
background: grey;
}
#menuLeft {
width: 50%;
float: left;
}
#menuRight {
float: right;
}
#menuRight li {
display: inline-block;
background: red;
}
.content {
border: 1px solid orange;
margin: 150px auto;
}
#contentHalf {
float: left;
width: 50%;
}
#contentHalf2 {
float: right;
}
.footer {
height: 200px;
border: 1px green solid;
background: grey;
}
#footerLeft {
float: left;
width: 50%;
}
#footerRight {
float: right;
}
<div class="menu">
<div class="mainWidth">
<div id="menuLeft">
<img src="images/jez.jpg" width="205px" height="136px">
</div>
<div id="menuRight">
<ul>
<li>Start</li>
<li>O nas</li>
<li>Kontakt</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div class="content">
<div class="mainWidth">
<div id="contentHalf">
<h1>Tytul</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo erat quis imperdiet porta. In sed nisi magna. Fusce a efficitur magna. Etiam dictum elit in mauris gravida scelerisque. Nulla sit amet fermentum lacus. In tincidunt eu ex ac
eleifend. Donec finibus, magna eu venenatis varius, nisi risus commodo risus, luctus iaculis ante magna id ligula. Cras facilisis diam lorem. Donec egestas ante elit, eu tristique ipsum ornare ac. Ut ullamcorper lacus eget arcu efficitur, eu dapibus
erat pretium.
</p>
</div>
<div id="contentHalf2">
<img src="images/bg.jpg" width="213px" height="142px">
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<div class="mainWidth">
<div id="footerLeft">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo erat quis imperdiet porta. In sed nisi magna. Fusce a efficitur magna. Etiam dictum elit in mauris gravida scelerisque. Nulla sit amet fermentum lacus. In tincidunt eu ex ac eleifend.
Donec finibus, magna eu venenatis varius, nisi risus commodo risus, luctus iaculis ante magna id ligula. Cras facilisis diam lorem. Donec egestas ante elit, eu tristique ipsum ornare ac. Ut ullamcorper lacus eget arcu efficitur, eu dapibus erat
pretium.
</p>
</div>
<div id="footerRight">
<img src="images/bg.jpg" width="213px" height="142px">
</div>
</div>
</div>
First at all. if you want 2 containers side by side 50% each, the right way to do it is BOTH floating left and both with 50% width... so to start:
#menuLeft {
width: 50%;
float: left;
}
#menuRight {
width: 50%;
float: left;
}
#contentHalf {
float: left;
width: 50%;
}
#contentHalf2 {
float: left;
width: 50%;
}
#footerLeft {
float: left;
width: 50%;
}
#footerRight {
float: left;
width: 50%;
}
assuming you want the ul of your header at the right, then just add:
#menuRight {
text-align:right;
}
as your li's are already inline-block they will behave as you wish.
same with your images. In this case you want them centered, so just add:
#contentHalf2 {
text-align:center;
}
#footerRight {
text-align:center;
}
is this what you are looking for? FIDDLE
I believe this is what you were trying to achieve: https://jsfiddle.net/u06x2hof/
That is, having the images centred within their respective 'halves'.
Of course the easiest way to centre stuff in CSS is with display : flex; and justify-content : center;, so that's what I've done.