I know this will be easy for someone experienced in CSS. I made a mock-up of my code here to show what I have. I'm trying to get the background colors, pink and green, extend to the bottom of the white column... or whichever one is longest. I thought the clear:both would work but I'm missing something I know is simple. Help appreciated, snickers expected.
JSFiddle
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:lightblue;
}
#mainColumn {
float: left;
margin-left: 0;
margin-right: 0;
width: 830px;
background-color: white;
}
#leftColumn {
float: left;
margin-left: 0;
margin-right: 0;
width: 195px; /* modified - shortened */
background-color:pink;
}
#rightColumn {
float: left;
width: 195px;
background-color:green;
}
#myWrapper {
background-color: black;
}
.clearit {
clear: both;
}
</style>
</head>
<body>
<div id="myWrapper">
<div id="leftColumn">
some content
</div>
<div id="mainColumn">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper urna a magna euismod, vitae dapibus justo feugiat. Pellentesque ac dui lorem. Fusce ligula urna, ultrices a lectus sit amet, luctus semper est. Curabitur a egestas elit, vitae tincidunt elit. Donec quis nunc id nibh fermentum lobortis egestas id eros. Aenean eget purus erat. In auctor, ipsum in dapibus imperdiet, nulla elit posuere neque, ultrices convallis ligula odio eget felis. Maecenas quis turpis nulla. Nam a velit non lorem semper tincidunt eget iaculis sem. Donec vitae venenatis libero. Duis consequat augue sed sapien cursus dapibus.
</div>
<div id="rightColumn">
even more content
</div>
</div>
<div id="EvenUp" class="clearit">
</div>
<p> On with life </p>
</body>
One solution is to place both left and right columns inside mainColumn and use display:table and display:table-cell
css
body {
background-color:lightblue;
}
#mainColumn {
margin-left: 0;
margin-right: 0;
width: 830px;
background-color: white;
display: table;
}
#leftColumn {
display: table-cell;
margin-left: 0;
margin-right: 0;
width: 195px;
/* modified - shortened */
background-color:pink;
}
#rightColumn {
display: table-cell;
width: 195px;
background-color:green;
}
#myWrapper {
background-color: black;
}
.clearit {
clear: both;
}
fiddle
Related
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.
I use display:table and vertical-align:middle to vertically center a div with dynamic height.
CSS
.table {
display:table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
text-align:center;
}
.content {
display: inline-block;
width: 100px;
overflow-y: auto; /* Useless */
}
HTML
<div class="table">
<div class="cell">
<div class="content">
Then this text becomes too long, it will cause
the .table div to expand beyond its container
even if set to height: 100%
</div>
</div>
</div>
How do I get the content div to get a vertical scroll when its height becomes greater than the table div (or rather the table div's parent)?
JS Fiddle example
Instead of a CSS tables approach, you can use the Centering in the unknown approach:
.cell, .cell:before {
height: 100%;
}
.cell:before {
content: '';
margin-right: -0.25em; /* Adjusts for spacing */
}
.cell:before, .cont {
vertical-align: middle;
display: inline-block;
}
.cont {
max-height: 100%;
overflow-y: auto;
}
.margin {
position: absolute;
left: 32px;
right: 32px;
top: 32px;
bottom: 32px;
background: yellow;
text-align: center;
}
.cell, .cell:before {
height: 100%;
}
.cell:before {
content: '';
margin-right: -0.25em; /* Adjusts for spacing */
}
.cell:before, .cont {
vertical-align: middle;
display: inline-block;
}
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
text-align: left;
border: 1px solid #000;
max-height: 100%;
overflow-y: auto;
}
<div class="margin">
<div class="cell">
<div class="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p>
</div>
</div>
</div>
You can add a .row element:
<div class="table">
<div class="row">
<div class="cell">
<div class="content">Long text</div>
</div>
</div>
</div>
With this CSS:
.table {
display: table;
height: /* something */;
}
.row {
display: table-row;
height: 100%;
}
.cell {
display: table-cell;
height: 0;
}
.cont {
max-height: 100%;
overflow-y: auto;
}
This reduces the height of .cell as much as possible –making .cont overflow–, but since .row has height: 100%, it will cover .table.
.margin {
position: absolute;
left: 32px;
right: 32px;
top: 32px;
bottom: 32px;
background: yellow;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 0;
}
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
max-height: 100%;
overflow-y: auto;
}
<div class="margin">
<div class="table">
<div class="row">
<div class="cell">
<div class="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis
orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis
faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris
vitae urna volutpat, non ultrices felis ultricies.</p>
</div>
</div>
</div>
</div>
</div>
An alternative to achieve the same effect is to use display: flex instead of display: table
.flex {
position:absolute;
left:32px; right:32px; top:32px; bottom:32px;
display: flex;
align-items: center;
justify-content: center;
background:yellow;
}
.item {
max-height: 100%;
box-sizing: border-box;
width: 264px;
padding: 0px 12px;
background: #ddd;
border: 1px solid #000;
overflow:auto;
}
<div class="flex">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p>
</div>
</div>
This works in Chrome (v39), Firefox (v36), and IE11. However, IE11 doesn't seem to regrow the item div once the scrollbar has been added, even if there is space for it.
It's not the .table div that expands beyond its container. It's the .cont div.
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
overflow:auto;
}
Nothing in this class limits the height to 100%, so the .cont div will expand beyond the borders of .table
Just add max-heigh:100% to limit it to 100% of the parent's (.cell) height. And then the overflow:auto (that was already there) should do the rest of the job
http://jsfiddle.net/0q78gbvh/1/
EDIT: This will not work in all browsers, because you can't set the max-height from display:table directly in those browsers.
Is this what you are looking for?
Since you have a <p> element in ur jsFiddle Eg, set a max height to the container equal to the .margin
.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
max-height:300px; /* Fixed max-height of container... */
overflow-y:scroll;
}
JSFiddle Example
So on my page, I have a two column layout - 75% (left - blue) and 25% (right - red). I can't get the red column to fill. In Chrome's inspector I see that the container classed <div> has expanded vertically to the size of #left, but I just cannot coax #right to expand appropriately. Here's the jfiddle link for my css and html (followed by the code itself in case you don't want to click to tinker):
Just one quick note: In my actual development code I don't use blue and red (left and right div background colours) - I use white and navy, respectively.
http://jsfiddle.net/EG3zb/
<div class="container">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id nunc bibendum ligula tempus interdum a ac urna. Fusce sed nunc molestie, consequat orci eu, vehicula orci. Suspendisse nec leo sit amet tellus varius feugiat. Maecenas lacinia neque euismod, tincidunt nisi et, fermentum ipsum. Vivamus ut gravida velit, vitae ultrices ante. Nullam varius mattis tellus, vitae consectetur tortor porttitor eu. Donec congue eros mauris. Ut consequat aliquam mattis. Aliquam non neque eros.</p>
</div>
<div id="right">
Blah.
</div>
</div>
And the accompanying CSS:
.container {
width: 100%;
min-height: 100%;
overflow: auto;
}
#left, #right {
padding-top: 2%;
}
#left {
float: left;
width: 75%;
color: #fff;
background-color: blue;;
}
#right {
float: right;
width: 25%;
background-color: red;
color: #fff;
}
this is working
.container {
width: 100%;
min-height: 100%;
overflow: auto;
display:flex;
}
.container #left,.container #right{
-webkit-flex: auto;
-ms-flex:auto;
flex:auto;
}
here is working demo
http://jsfiddle.net/mauryaashish945/EG3zb/5/
Instead of default display:block you can use display:table-cell so there is no need for float:left\right :
#left, #right {
display:table-cell;
}
Example
I have simple site, with the classic elements: Container, Header, Content and Footer. The container has a background-color, which covers the whole content of the site (including header, content and footer). For some reason this won't work with floated elements within the container.
I have found a solution at StackOverflow, but it doesn't feel right. Solution is to set { display: table; } onto the container id.
The page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
body
{
background-color: #999;
font-family: Tahoma;
font-size: 12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin: 0px;
padding: 0px;
}
h1
{
color: green;
font-family:Tahoma;
font-size: 26px;
font-weight: bold;
margin: 5px 0;
text-indent: 10px;
width: 100%;
}
#container
{
background: #FFF;
margin: 0 auto;
width: 950px;
position: relative;
}
#header
{
position: relative;
height: 100px;
width: 950px;
}
#content, #content-ext
{
float: left;
margin: 0;
width: 950px;
}
#nav
{
float: left;
padding: 10px 10px 10px 0;
width: 200px;
}
ul#menu
{
cursor: pointer;
display: block;
list-style: none outside none;
margin: 0 auto;
padding: 0;
text-align: left;
width: 200px;
}
ul#menu li
{
margin: 0;
padding: 0;
}
ul#menu li a
{
color: #111;
display: inline-block;
height: 50px;
font-size: 18px;
line-height: 60px;
margin: 0 auto;
padding: 0 0 0 10px;
text-decoration: none;
width: 100%;
}
#mainImg
{
background: #111;
height: 150px;
float: right;
margin: 0 0 20px 0;
width: 710px;
}
#main-content
{
float: right;
width: 710px;
}
#extra
{
float: left;
width: 500px;
}
#contact
{
float: left;
width: 450px;
}
#footer
{
color:#999;
height:20px;
width:950px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>test</h1>
</div>
<div id="content">
<div id="nav">
<h1>Menu</h1>
<ul id="menu">
<li>Home</li>
<li>Contact</li>
</ul>
</div>
<div id="mainImg"></div>
<div id="main-content">
<h1>Welkom</h1>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed arcu arcu, a interdum metus. Aenean vel libero nulla. Nulla facilisi. Maecenas malesuada libero a ante vulputate vestibulum. Cras id neque vitae lectus luctus tempor non non risus. Morbi aliquam porttitor facilisis. Sed pulvinar erat sit amet est auctor tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget arcu lorem, non accumsan ipsum. Donec venenatis adipiscing massa, sed molestie augue ullamcorper et.</strong>
<br/><br/>
Morbi id eros vitae risus tristique bibendum. Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel, volutpat eget sapien. Proin tempus nunc sit amet ligula viverra hendrerit. Donec tempus tristique risus. Fusce at semper est. Etiam ligula est, varius ut tempus at, laoreet bibendum eros. In hac habitasse platea dictumst.</p>
</div>
</div>
<div id="content-ext">
<div id="extra">
<h1>Extra</h1>
<p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Does any has a decent solution for using floated elements within a container? And showing the container as overall background?
Well, there is two classic solutions:
Set "overflow: hidden;" to #container. It will clear floats but have drawback — if you have elements with "position: absolute;" inside container that must be positioned partially outside it, they will be cut by overflow.
Use clearfix hack on #container: http://www.webtoolkit.info/css-clearfix.html it will fix it for you and don't have this drawbacks but is more complex.
Not sure is it better then "display: table;" or not, through.
Leave Display:table, it's not a good solution for a simple problem.
You are starting with a simple layout, and it's a good practice to start with a clean and tested layout.
My favorite resources are:
Little boxes
Free-css
code sucks
good luck