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.
Related
I'm currently making a (static) website from scratch (so code the HTML and CSS stuff myself), and I want to have a responsive "image gallery" that changes the width of the pictures according to your screen width, so I followed this tutorial: CSS Image Gallery - responsive
However, changing it to my own likings I encountered an issue I could not fix with my current HTML/CSS skillset (it is not that much, I'm quite new in this). My problem is when I have (in my example three) images of the same size in my gallery, but the captions of the image have different length, this negatively affects the text that is followed by the gallery (see example and image below). I tried to fix this with the tutorials available at W3 and stuff, but nothing worked yet.
Does any of you how to (easily) fix this? And if so, please explain what you changed, because I want to truly understand what is going on at my website (that is why I didn't want to use these static site generators).
Note: I have made 3 types of galleries, one for two, three and four images, which explains the ".responsivethree" etc classes
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p>
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
The float:left property you gave to the responsivethree class aligns the images to the left. Since you did not reset the left justification feature afterward, you are having a problem with the text scrolling. The clear:both command is used to reset the float:left property.
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p class="clear">
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
Attached is an image of the desired affect I am going for. I am trying to do this with negative margins. I need the child element to expand past the parent element on the top and bottom. The issue is the background color of the parent element is matching the height of the child element. This is a responsive site and I will not be able to use absolute positioning of the child element as the height of the child (and therefore parent element) will be variable. Any help would be greatly appreciated
Following is my code...
body {
background-color:#DBD9DB;
}
#headerImage {
margin: 0;
}
#headerImage img {
display: block;
margin: 0 auto;
}
#parent {
background-color: #fff4d7;
}
#child {
background:none #FFF;
margin:-46px auto -38px;
position:relative;
text-align:center;
width:80%;
}
<body>
<div id="headerImage">
<img src="http://fpoimg.com/300x250?text=Preview" width="300" height="250" />
</div>
<div id="parent">
<div id="child">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti. Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>
</div>
</div>
</body>
body {
background-color: #DBD9DB;
}
#parent {
background-color: #fff4d7;
}
#parent:before,
#parent:after {
content: " ";
display: block;
height: 50px;
background-color: blue;
}
#child {
background: none #FFF;
position: relative;
text-align: center;
width: 80%;
margin: -50px auto;
}
.parent {
width: 100%;
height: auto;
margin: 0 auto 0 auto;
background-color: #b5b5b5;
overflow: hidden;
position: relative;
}
img {
width: 100%;
height: auto;
}
.clearfix {
overflow: auto;
zoom: 1;
}
<body>
<div class="parent clearfix">
<div class="css-slideshow">
<div id="parent">
<img class="clearfix" src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" />
<div id="child">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti.
Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>
</div>
</div>
</div>
</div>
</body>
You can use :after and :before pseudo-elements in the #parent id to change the background-color and then use negative margin in #child.
Check this snippet out:
body {
background-color:#DBD9DB;
}
#headerImage {
margin: 0;
}
#headerImage img {
display: block;
margin: 0 auto;
}
#parent {
background-color: #fff4d7;
}
#parent:before, #parent:after{
content: " ";
display: block;
height: 50px;
background-color: blue;
}
#child {
background:none #FFF;
position:relative;
text-align:center;
width:80%;
margin: -50px auto;
}
<body>
<div id="headerImage">
<img src="http://fpoimg.com/300x250?text=Preview" width="300" height="250" />
</div>
<div id="parent">
<div id="child">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti. Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>
</div>
</div>
</body>
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.
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/
Somehow, the paragraph is not floating beside the profilePic. It starts from the bottom of the profilePic. I am not able to understand why.
What is the mistake here?
.content {
margin-top: 30px;
margin-left: 20px;
padding-bottom: 20px;
}
.infoBit {
width: 800px;
float: left;
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic {
border: 1px blue solid;
height: 49px;
display: inline-block;
width: 49px;
float: left;
}
.infoText {
display: inline-block;
float: left;
}
<div class="content">
<div class="infoBit">
<div class="profilePic"></div>
<div class="infoText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis enim ut sapien sodales commodo. Fusce congue, elit a finibus fermentum, diam eros mollis massa, at eleifend sapien dui eget mauris. Donec nec diam enim. Vivamus commodo placerat risus
vitae auctor. Cras leo elit, egestas eget dolor vitae, facilisis consequat sem. Mauris facilisis ipsum in porttitor ullamcorper. Nam vel massa sed quam venenatis facilisis. Quisque vitae mollis urna. In egestas nunc sed felis consequat, in malesuada
dolor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
https://jsfiddle.net/4sbzos1r/
It works fine even if is wrapped inside a . Defining width of resolves issue
Please change styles as below
.content
{
margin-top : 30px;
margin-left: 20px;
padding-bottom: 20px;
}
.infoBit
{
width: 800px;
/* float: left; */
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic
{
border:1px blue solid;
height: 49px;
display: inline-block;
width: 49px;
float: left;
}
.infoText
{
display: inline-block;
width: 700px;
}
As others have mentioned, it is because you have your <p> wrapped in a <div> with class infoText, which applies the styling display: inline-block; float:left; from the css you wrote. I would suggest either taking out the <div> entirely, or just remove the infoText styling you have. Furthermore, you probably want margin-top:0 on .infoText to bring the text to the top.
Does that make sense?
hope this help you
.content
{
margin-top : 30px;
margin-left: 20px;
padding-bottom: 20px;
}
.infoBit
{
width: 800px;
float: left;
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic
{
border:1px blue solid;
height: 49px;
display: inline-block;
width: 49px;
float: left;
}
.infoText
{
display: inline-block;
width:250px
}
.infoText p{
margin-top:0
}
<div class="content">
<div class="infoBit">
<div class="profilePic"></div>
<div class="infoText">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis enim ut sapien sodales commodo. Fusce congue, elit a finibus fermentum, diam eros mollis massa, at eleifend sapien dui eget mauris. Donec nec diam enim. Vivamus commodo placerat risus vitae auctor. Cras leo elit, egestas eget dolor vitae, facilisis consequat sem. Mauris facilisis ipsum in porttitor ullamcorper. Nam vel massa sed quam venenatis facilisis. Quisque vitae mollis urna. In egestas nunc sed felis consequat, in malesuada dolor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>