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.
Related
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>
I have a section on a site where the parent ID styling rules are conflicting with how I need a particular area of the section to look. This is how it should look -
And this is the coded version so far -
The rules set for the text above are conflicting with how the h2 / p text should show for the 'CASE STUDY' which I need to push to the left and the image to remain on the right, aligned with the text. I need to overcome the parent rules but I've tried a few different things and nothing. Also, I'm not sure why the background color is not stretching across the page. Here's the code so far -
/* CASE STUDY */
section#casestudy {
height: 750px;
max-width: 100%;
}
section#casestudy div.row {
height: 250px;
max-width: 100%;
text-align: center;
position: relative;
}
section#casestudy .four {
position: relative;
max-width: 100%;
display: inline-block;
margin: 0 auto;
}
#casestudy h4 {
color: #000000;
font-size: 20px;
padding-top: 50px;
line-height: 5px;
}
section#casestudy p {
font-size: 10px;
color: #bdc3c7;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
#council div.row {
display: block;
background-color: #d3d3d3;
width: 960px;
}
#council img {
float: right;
}
#council h2 {
font-size: 20px;
text-align: left;
color: #000000;
}
#council div.row p {
font-size: 10px;
text-align: left;
width: 50%;
}
.four h3 {
position: absolute;
color: #FFF;
font-size: 20px;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
section#casestudy img {
display: block;
margin-left: 20px;
padding: 10px;
}
<section id="casestudy">
<div class="container">
<div class="twelve columns">
<div class="row" id="meettheteam">
<h3>WHAT IS 2D ANIMATION?</h3>
<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. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar.</p>
</div>
</div>
<div id="council">
<div class="twelve columns">
<div class="row">
<h4>LATEST CASE STUDY</h4>
<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>
<img src="images/VIDEO.jpg" alt="Video" style="width: 300px; , height: 100px;" >
</div>
</div>
</div>
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div>
</div>
</section>
Any assistance/guidance appreciated.
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 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.
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.