One picture worth a thousand words:
How to implement this layout? I want text to flow freely from Column-1 to Column-2.
Note that inset width is greater than column width, so it "pushes" text in Column-1 a bit. Below inset Column-1 returns to normal width.
I want compatibility with latest releases of modern browsers (Chrome, FF). No IE is OK. Safari, Mobile Safari, Opera are desirable.
JS is OK, but I'd prefer a solution without it.
Update about known dimensions:
I know width and height of whole "page".
I know width and height of image.
I know width of inset, but not its height (since there is additional caption text there).
Update:
Below is my test code. If I move inset out of columns div, it is displayed as "third column".
If inset is in front of the text, it is displayed in the left column at the top, clipped from the left side to the column width.
If inset is in end of the text, it is displayed in the right column at the bottom, clipped from the left side to the column width in Chrome, and overflowing to the left column in FF (without pushing its text).
I must be missing something... :-(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Column test</title>
<style type="text/css">
div.columns
{
text-align: left;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-moz-column-count: 2;
-moz-column-gap: 40px;
column-count: 2;
column-gap: 40px;
}
div.columns p
{
margin-top: 0px;
margin-bottom: 20px;
text-indent: 20px;
}
</style>
</head>
<body>
<div class="columns" style="width:800px">
<!-- BEGIN INSET -->
<div style="float:right; width: 500px; margin-left: 40px; margin-bottom: 40px;">
<div style="width: 500px; height: 300px; background-color: #5a5a5a;">
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc neque elit, mollis a vulputate ac, mollis vitae augue. Sed augue enim, congue ac laoreet hendrerit, ultricies a sem. Integer dignissim molestie erat quis lacinia.
</div>
<!-- END INSET -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc neque elit, mollis a vulputate ac, mollis vitae augue. Sed augue enim, congue ac laoreet hendrerit, ultricies a sem. Integer dignissim molestie erat quis lacinia. Nulla pellentesque sodales dolor, et egestas tortor ultricies et. In hac habitasse platea dictumst. Nunc semper dui sit amet sem condimentum vitae molestie arcu cursus. Morbi rhoncus posuere gravida. Sed bibendum ullamcorper lectus, id mollis nulla pulvinar hendrerit. Mauris id est nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tempor venenatis vehicula. Nam a enim justo, nec viverra sem. Vivamus faucibus ullamcorper lobortis.
</p>
<p>
Cras nulla ante, tincidunt non accumsan nec, adipiscing eget odio. Nam gravida ligula at elit interdum lacinia. Mauris condimentum justo venenatis mauris condimentum eu fringilla augue hendrerit. Duis eget enim et erat faucibus blandit et lobortis ligula. Integer felis justo, feugiat et scelerisque non, vehicula in urna. Aliquam dignissim tristique ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam volutpat ullamcorper purus, ut auctor magna consectetur at. Aliquam vitae odio in lectus lobortis fermentum. Nunc tortor quam, luctus et consequat vel, fringilla at lorem. Cras ut molestie diam. In aliquet purus sed massa sagittis id dapibus est ultricies. Mauris sed laoreet est.
</p>
<p>
In hac habitasse platea dictumst. Integer mollis dapibus tellus, at venenatis mi euismod quis. Donec quis ullamcorper nulla. Maecenas semper porttitor nibh, et porttitor ipsum convallis eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec est turpis, faucibus id venenatis ac, mollis ut risus. Nam tincidunt scelerisque lectus.
</p>
<p>
Donec euismod neque id est accumsan eu egestas tortor adipiscing. Curabitur tortor ante, mattis at ultrices vel, facilisis eu sapien. Nullam congue ipsum vel nisi condimentum quis condimentum turpis pretium. In aliquet imperdiet ligula, ut dictum lorem ultrices at. Quisque ac nunc arcu. Pellentesque egestas venenatis urna, in blandit purus ullamcorper at. Ut lobortis, nisi at pharetra consequat, est nibh interdum est, vitae tempor felis magna sed erat. In hac habitasse platea dictumst.
</p>
<p>
Sed ligula felis, volutpat ac pulvinar a, porta sed felis. Aenean eu turpis nec magna mollis tincidunt quis vitae massa. Praesent faucibus nisl in leo rutrum gravida. Donec aliquet interdum vestibulum. Aenean faucibus posuere ornare. Donec sed velit id sem pulvinar faucibus ut tempor tellus. Donec ante justo, egestas eget venenatis vitae, tempor et nulla. Suspendisse dapibus pellentesque nulla sit amet tempor. Curabitur auctor, sem id ullamcorper ultricies, nisl tortor rhoncus lorem, eleifend ornare tortor ante vel lectus. Nunc lectus sem, ullamcorper vitae aliquam sed, volutpat eu justo. Nam et nisl est, dictum vestibulum dolor. Cras ipsum orci, vestibulum ac convallis a, laoreet in lorem. Aliquam at adipiscing lacus. Donec quis dui sed felis sollicitudin ultricies in vel libero. Donec tincidunt felis et metus mollis at congue elit molestie.
</p>
<p>
Ut posuere lobortis est, sit amet adipiscing neque vehicula eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id fermentum felis. Aenean nunc neque, faucibus vel consectetur eget, ullamcorper ac est. Nulla sit amet metus sed erat fringilla lacinia. In at pulvinar sapien. Mauris volutpat scelerisque elit, quis lobortis orci imperdiet pretium. Ut facilisis interdum dapibus. Sed luctus dignissim blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin ultricies tortor nec rutrum.
</p>
<p>
Quisque sed sollicitudin lacus. Quisque egestas interdum dui, eget gravida sem convallis in. Sed auctor justo et urna gravida tincidunt. Proin erat nibh, euismod et varius at, aliquam in diam. Nullam condimentum libero id libero pretium ac ullamcorper arcu luctus. Sed gravida mattis tortor sit amet accumsan. Etiam vitae consequat dolor.
</p>
</div>
</body>
</html>
How about making the image with its caption in a separate CSS layer and "pinning" it into the right position, coupled with some DIV's underneath which take care of pushing the content out from under it? Something like this:
In CSS:
#column1 {
color: white;
width: 200px;
background: #444;
height: 300px;
float: left;
margin-right: 5px;
}
#column1-spacer {
float: right;
width: 45px;
height: 170px;
}
#column2 {
color: white;
width: 200px;
height: 300px;
background: #444;
float: left;
margin-left: 5px;
}
#column2-spacer {
height: 175px;
}
#imageWrapper {
background: white;
position: absolute;
left: 170px;
width: 250px;
height: 170px;
}
#image {
margin-left: 10px;
width: 240px;
height: 125px;
background: #888;
}
#caption {
font-size: 0.85em;
margin-left: 10px;
}
And in HTML:
<div id="column1">
<div id="column1-spacer"></div>
Column 1
</div>
<div id="column2">
<div id="column2-spacer"></div>
Column 2
</div>
<div id="imageWrapper">
<div id="image">Image</div>
<div id="caption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas vel vulputate justo.
</div>
</div>
In my Firefox, it produces this:
curtisdf has answered the issue of the image placement but as far as flowing text freely from column 1 to column 2 the easiest way would be to use CSS 3 columns. You can make CSS 3 columns work in browsers that don't support CSS 3 by adding modernizer to your site.
Modernizer: http://www.modernizr.com/
CSS 3 Columns: http://www.w3.org/TR/css3-multicol/
Related
I am trying to set a block of text in an HTML page using #page to create a printed output for multiple pages.
If set the div of the text block to position: fixed; bottom: 0; then it appears on every page.
If I set the HTML body to position: relative; and the div of the text block to position: absolute; bottom: 0; then it only appears on the first page.
How is it possible to position a block of text at the bottom of the last printed page? This is not a footer to appear in the margins but a block of text in the page that I am trying to position.
Any pointers would be appreciated.
My solution is as follows. Keep the footer fixed, but set z-index: -1 by doing this, the footer will always hide behind the text until the end of the text, its not a perfect solution, but its feasible solution to replicate your expected result.
html,
body {
margin-bottom: 20px;
}
.wrapper {
position: relative;
}
.footer {
z-index: -1;
position: fixed;
bottom: 0px;
text-align: center;
width: 100%;
}
.content {
z-index: 3;
overflow: hidden;
padding-bottom: 30px;
background-color: white;
}
#media print {
.footer {
position: fixed !important;
bottom: 0px;
}
}
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc ex, iaculis ut maximus vel, euismod in enim. Aenean neque purus, vehicula rhoncus congue sed, sodales et nunc. Quisque pharetra tellus non auctor gravida. Sed in felis accumsan, dapibus
ex at, elementum urna. Maecenas ut massa faucibus felis aliquam scelerisque. Quisque at molestie nunc. Nullam est nibh, aliquam non augue vitae, tempus imperdiet massa. Mauris sed feugiat lectus. Aenean vel dapibus tortor. In dolor augue, dignissim
vel blandit eget, laoreet vel mi. In hac habitasse platea dictumst. Pellentesque metus ante, finibus in nisl ac, mollis blandit justo. Nulla a tincidunt orci. Proin malesuada ac est vitae eleifend. Donec tincidunt ipsum felis, ut feugiat dolor mattis
ac. Integer lectus tellus, tincidunt eget aliquet eu, mattis non dolor. Vivamus tempus sapien at sem aliquam, commodo rutrum quam pulvinar. Praesent eu leo sit amet risus malesuada porttitor quis quis augue. Cras placerat felis quis ligula auctor
fringilla. Cras efficitur tellus quis velit posuere, et aliquam libero egestas. Donec eu tincidunt felis, ut sodales erat. Phasellus vitae neque massa. Maecenas ut erat nibh. Aenean vitae ligula arcu. Maecenas justo velit, sagittis eget turpis ac,
tempus congue elit. Morbi egestas nisi risus, quis varius purus varius ac. Donec in viverra augue. Proin vel sem in enim volutpat rhoncus non sit amet diam. Nullam tellus lorem, tempus sit amet accumsan id, finibus ac turpis. Integer quis nunc id
tortor fermentum bibendum ut in leo. Cras magna velit, pellentesque sit amet dignissim non, aliquam eu odio. Quisque id tristique urna. Donec fermentum dolor vel pharetra placerat. Curabitur ullamcorper iaculis nulla quis sagittis. Proin scelerisque
ullamcorper porta. Praesent id odio ex. Sed in gravida augue, sed pretium erat. In hac habitasse platea dictumst. Proin congue dolor eu felis lacinia euismod. Aliquam varius, justo ut interdum dapibus, diam nulla molestie ante, eu pellentesque mi
</div>
<div class="footer">this is the footer</div>
</div>
So what my goal is, is to position this div background box "lightgrey", with the text which is in another div, but everytime i get the divs positioned the way I want, they seem to be offset, I was thinking of creating a #media_query but I felt like I would have to create way too many statements to have it adjust accordingly, if anyone has any suggestions that would be great.
<div style="width:200px; height:200px;right:0;margin-right:7%; border: 5px;
solid:grey; background-color:lightgrey;position:absolute;">
</div>
<div style="position:absolute;right:0;margin-right:10%;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
The first image is of a map leaflet that does what I want to achieve and its essentially dynamically changing the size without losing its position, verses what I created which constantly moves out of position when i resize the screen.
Leaflet Map (my goal):
This first image is ideal with how I would want it positioned:
When I resize this happens:
I don't have a ton of experience with css, I'm in a web development class right now, but I wont be able to see my professor because of the holidays, if anyone could give me some suggestions I would really appreciate it!
Any suggestions?
html code: https://pastebin.com/iTmsyV5Z
I can't really get a full example working to test but something like:
<div style="width: 200px; height:200px; border: 5px;
solid:grey; background-color: lightgrey; float: left;">
</div>
<div style="margin-left:10%; float: left;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
or
<div style="width: 200px; height:200px; border: 5px;
solid:grey; background-color: lightgrey; float: left;">
</div>
<div style="margin-right:10%; float: right;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
Should work after some adjustments of the values. Not sure if you want the grey box all the way to the right or left.
I achieved this by using relative positioning. And floating both elements left so they stack horizontally. I believe this is what you wanted.
By adding the element within your main container, absolute positioning will work nicely. This will then scroll with the container. If you require it to stay where it is on the screen, you will need to use fixed positioning, it will then be relative to your viewport. So keep in mind when adjusting your top and right positioning to compensate.
.Menu,
.Content {
position: fixed;
background-color: #CCC;
left: 10%;
right: 10%;
}
.Menu {
top: 10px;
height: 50px;
}
.Content {
top: 70px;
bottom: 10px;
overflow: auto;
padding-right: 250px;
}
.Floating {
position: absolute;
background-color: #EDEDED;
right: 20px;
top: 20px;
width: 210px;
height: auto:
}
<div class="Menu">
This is the menu
</div>
<div class="Content">
<div class="Floating">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus felis
nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis.
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus
felis nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis. Morbi id quam libero. Donec laoreet ullamcorper lobortis. Etiam quis est ac lacus varius malesuada. Nunc venenatis
rutrum dui, id euismod nunc porttitor id. Nulla id sapien imperdiet, ullamcorper felis et, rhoncus tortor. Quisque purus tellus, molestie a urna in, bibendum bibendum mauris. Nunc aliquet ornare tincidunt. Praesent leo diam, fermentum nec tempor in,
pellentesque eget velit. Aenean luctus mauris et turpis vehicula, at tristique ex gravida. Vivamus finibus, tellus vel volutpat facilisis, enim metus mattis mi, quis dictum tortor mi a mauris. Pellentesque malesuada tellus non consectetur feugiat.
Proin rutrum sem nec odio varius tincidunt. Quisque egestas enim et orci scelerisque, quis viverra lectus tristique. Donec consectetur, lacus sed vehicula lacinia, ipsum arcu consequat odio, sed porta erat neque eu lacus. Proin consequat quam vitae
nisl vulputate, ut imperdiet justo ultricies. Phasellus dictum vestibulum ullamcorper. Quisque lobortis eros sed ante porta ultricies. Suspendisse sit amet purus non enim fringilla pellentesque. Sed posuere, metus ut venenatis pretium, enim urna laoreet
sapien, accumsan condimentum mauris nisi sed elit. Nunc mollis sit amet enim ac placerat. Donec elementum consectetur ipsum in molestie. Fusce auctor sollicitudin lorem a pharetra. Vestibulum blandit consectetur sagittis. Nullam varius commodo dictum.
Sed tempus a nulla nec feugiat. Sed pharetra mattis velit sed sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sit amet vehicula felis. Nullam faucibus interdum rhoncus. Proin eget velit non
nunc dignissim vestibulum sit amet id nulla. Nunc a lectus mauris. Sed sagittis orci ullamcorper nisi ullamcorper dictum. Etiam ut tellus tortor. In a molestie tortor. Quisque turpis tellus, fermentum euismod eros a, vulputate aliquam sapien. Integer
nunc dui, scelerisque nec interdum id, auctor ut ante. Curabitur pharetra dui vitae tellus tincidunt auctor. Etiam eget fringilla massa. Phasellus auctor lorem hendrerit massa porttitor, luctus consequat leo semper. Curabitur sollicitudin est sapien,
sed vulputate neque finibus ac. Aliquam pulvinar enim ac mi congue, eu dapibus velit imperdiet. Suspendisse pretium tellus eu urna auctor, quis sodales erat varius. Aenean eget felis mi. Suspendisse non tellus in mauris congue finibus et et risus.</div>
</div>
I'm trying to lay out my site in this way:
The image div will contain a variable-sized image, and the image should be vertically and horizontally aligned. The text div will contain a lot of text.
This could easily be done with a table, but I'm trying to make this responsive so that once the site is too small horizontally that the textDiv will no longer float next to imageDiv and will then fall underneath.
The problem I'm having is that the the divs will just take up the required space of their content. How do I ensure that these two will remain the same size when they are floated next to each other?
Once the divs no longer float next to each other them being the same size wouldn't make sense anymore so that functionality would no longer be required.
I found Flex as a possible solution but it isn't well supported. I should mention that their widths will be set to a percentage of the parentDivs width.
You can achieve this using:
Absolute positioning with padding
Flex layout
.parentDiv {border: 4px solid black;}
.imageDiv {border: 4px solid tomato;}
.textDiv {border: 4px solid skyblue;}
.imageDiv img { max-width: 100%; }
#media (min-width: 768px) {
#first .imageDiv { width: 50%; max-width: 50%; box-sizing: border-box; }
#first .parentDiv { position: relative; min-height: 150px; }
#first .parentDiv > div { padding-left: 50%; }
#first .imageDiv { position: absolute; top: 0; left: 0; }
#second .parentDiv { display: flex; }
#second .imageDiv, #second .textDiv { flex-basis: 50%; }
}
<h2>Using absolute positioning and padding</h2>
<div id="first">
<div class="parentDiv"><div>
<div class="imageDiv">
<img src="http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png">
</div>
<div class="textDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. In sit amet condimentum nulla, in elementum lorem. Duis iaculis, nibh nec iaculis semper, nisi neque fringilla metus, in faucibus urna urna non libero. Nullam aliquet ligula lorem, imperdiet lobortis ex malesuada ac. In sollicitudin eros eu dui iaculis, ac rutrum metus dapibus. Nam ac ex gravida, fringilla lectus nec, posuere sem. Nunc sit amet mi quis quam aliquet viverra. Duis congue gravida diam, eget ullamcorper leo faucibus vitae. Duis pretium lacus id nisl suscipit, lobortis rhoncus nisl blandit. Proin quis vestibulum purus, eu faucibus lectus. Vivamus enim turpis, suscipit nec cursus ac, sollicitudin at quam. Curabitur venenatis nisi tellus, a molestie ex mattis ac. Nulla nec dui ac tellus lacinia posuere at vel ante. Nulla iaculis eleifend dignissim.
Sed at lobortis neque. Nunc sapien ante, convallis at lobortis id, suscipit vitae augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris commodo vehicula felis, in iaculis turpis eleifend vitae. Sed non iaculis turpis, a accumsan ipsum. Vestibulum nec pretium tortor, in bibendum nulla. Suspendisse id tincidunt felis. Sed eleifend, ipsum sit amet condimentum accumsan, metus mi euismod mi, at ullamcorper odio nunc ut leo. Donec pellentesque imperdiet enim, nec varius leo semper eu. Aenean dictum, justo pellentesque cursus consequat, nunc nulla aliquam augue, eget dignissim metus erat ac libero. Aliquam tristique orci sapien, at pretium leo molestie et. Ut quis auctor nisl.
Proin quis placerat urna. Aliquam non posuere elit, tincidunt sollicitudin libero. Nunc vel mauris sit amet nunc varius blandit vel vel felis. Sed dictum, lorem vitae commodo eleifend, purus libero sagittis mauris, et mattis mauris tortor et enim. Donec vel tincidunt mauris. Proin aliquam dui sed lorem auctor, id congue leo fermentum. Ut laoreet purus quis justo malesuada, sed gravida eros hendrerit. Quisque eleifend pulvinar leo ut volutpat. Curabitur nec lectus augue. Donec congue turpis sed lectus lobortis molestie. Aenean posuere in enim quis mattis. Morbi dui eros, tincidunt id hendrerit nec, tempor a mauris. Maecenas vel sem mi. Maecenas lacinia non augue at egestas.
Phasellus vestibulum elementum feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ullamcorper sapien elit, nec pretium sapien sollicitudin in. Donec placerat urna eget erat tincidunt imperdiet. Pellentesque sed nisi congue quam accumsan tristique sed ac diam. Nunc auctor non leo et ornare. Nam ornare pharetra lacus ut commodo. Sed sem nunc, porttitor a venenatis vel, cursus sed dui.
Morbi congue augue in tortor porta, vel condimentum orci feugiat. Donec lacinia nisl sed orci venenatis lobortis. Ut nulla eros, malesuada ut vestibulum cursus, laoreet et augue. Nullam varius dapibus lorem sit amet vestibulum. Pellentesque ultricies eu elit ac ullamcorper. Pellentesque viverra ultrices augue, ac vestibulum mi pretium ut. Vestibulum et ex eget tortor sodales convallis non a quam. Nam facilisis gravida lacinia. Quisque accumsan massa et accumsan interdum. Mauris vestibulum volutpat metus, vel pretium urna auctor eget. Vestibulum aliquet fringilla tristique. Nam ipsum quam, faucibus eget magna sed, facilisis molestie lacus.
</div>
</div></div>
</div>
<h2>Using flex layout</h2>
<p><b>Firefox specific problem:</b> the width of the image interfere with <code>flex-basis</code> of <code>imageDiv</code>.
<br>Give the width of the image in percentage.</p>
<div id="second">
<div class="parentDiv">
<div class="imageDiv">
<img src="http://sstatic.net/stackexchange/img/logos/so/so-logo-med.png">
</div>
<div class="textDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. In sit amet condimentum nulla, in elementum lorem. Duis iaculis, nibh nec iaculis semper, nisi neque fringilla metus, in faucibus urna urna non libero. Nullam aliquet ligula lorem, imperdiet lobortis ex malesuada ac. In sollicitudin eros eu dui iaculis, ac rutrum metus dapibus. Nam ac ex gravida, fringilla lectus nec, posuere sem. Nunc sit amet mi quis quam aliquet viverra. Duis congue gravida diam, eget ullamcorper leo faucibus vitae. Duis pretium lacus id nisl suscipit, lobortis rhoncus nisl blandit. Proin quis vestibulum purus, eu faucibus lectus. Vivamus enim turpis, suscipit nec cursus ac, sollicitudin at quam. Curabitur venenatis nisi tellus, a molestie ex mattis ac. Nulla nec dui ac tellus lacinia posuere at vel ante. Nulla iaculis eleifend dignissim.
Sed at lobortis neque. Nunc sapien ante, convallis at lobortis id, suscipit vitae augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris commodo vehicula felis, in iaculis turpis eleifend vitae. Sed non iaculis turpis, a accumsan ipsum. Vestibulum nec pretium tortor, in bibendum nulla. Suspendisse id tincidunt felis. Sed eleifend, ipsum sit amet condimentum accumsan, metus mi euismod mi, at ullamcorper odio nunc ut leo. Donec pellentesque imperdiet enim, nec varius leo semper eu. Aenean dictum, justo pellentesque cursus consequat, nunc nulla aliquam augue, eget dignissim metus erat ac libero. Aliquam tristique orci sapien, at pretium leo molestie et. Ut quis auctor nisl.
Proin quis placerat urna. Aliquam non posuere elit, tincidunt sollicitudin libero. Nunc vel mauris sit amet nunc varius blandit vel vel felis. Sed dictum, lorem vitae commodo eleifend, purus libero sagittis mauris, et mattis mauris tortor et enim. Donec vel tincidunt mauris. Proin aliquam dui sed lorem auctor, id congue leo fermentum. Ut laoreet purus quis justo malesuada, sed gravida eros hendrerit. Quisque eleifend pulvinar leo ut volutpat. Curabitur nec lectus augue. Donec congue turpis sed lectus lobortis molestie. Aenean posuere in enim quis mattis. Morbi dui eros, tincidunt id hendrerit nec, tempor a mauris. Maecenas vel sem mi. Maecenas lacinia non augue at egestas.
Phasellus vestibulum elementum feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ullamcorper sapien elit, nec pretium sapien sollicitudin in. Donec placerat urna eget erat tincidunt imperdiet. Pellentesque sed nisi congue quam accumsan tristique sed ac diam. Nunc auctor non leo et ornare. Nam ornare pharetra lacus ut commodo. Sed sem nunc, porttitor a venenatis vel, cursus sed dui.
Morbi congue augue in tortor porta, vel condimentum orci feugiat. Donec lacinia nisl sed orci venenatis lobortis. Ut nulla eros, malesuada ut vestibulum cursus, laoreet et augue. Nullam varius dapibus lorem sit amet vestibulum. Pellentesque ultricies eu elit ac ullamcorper. Pellentesque viverra ultrices augue, ac vestibulum mi pretium ut. Vestibulum et ex eget tortor sodales convallis non a quam. Nam facilisis gravida lacinia. Quisque accumsan massa et accumsan interdum. Mauris vestibulum volutpat metus, vel pretium urna auctor eget. Vestibulum aliquet fringilla tristique. Nam ipsum quam, faucibus eget magna sed, facilisis molestie lacus.
</div>
</div>
</div>
The image div will contain a variable-sized image, and the image
should be vertically and horizontally aligned. The text div will
contain a lot of text.
This could easily be done with a table, but I'm trying to make this
responsive so that once the site is too small horizontally that the
textDiv will no longer float next to imageDiv and will then fall
underneath.
If it is easily done with a table layout for you, then just use a table layout. Make it responsive by adding an appropriate media query and change the layout. By table layout I mean display: table (not the table element).
It will be as easy as:
#parent { display: table; }
#parent > div { display: table-cell; width: 50%; vertical-align: middle; }
Do take care to have a max-width specified on the image to keep it within bounds:
#imgWrap { text-align: center; }
#imgWrap > img { max-width: 100%; }
The vertical-align and text-align will help you control the alignment of the image.
The problem I'm having is that the the divs will just take up the
required space of their content. How do I ensure that these two will
remain the same size when they are floated next to each other?
Fixing the width with the display: table-cell will take care of that.
Once the divs no longer float next to each other them being the same
size wouldn't make sense anymore so that functionality would no longer
be required.
Just add a media query for the break point that you need and simply reset the display back to block:
#media screen and (max-width:480px) {
#parent { display: block; }
#parent > div { display: block; width: auto; }
}
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
#parent { border: 1px solid #00f; width: 75%; margin: 0 auto; display: table; }
#parent > div {
border: 1px solid #f00;
display: table-cell; width: 50%;
vertical-align: middle;
}
#imgWrap { text-align: center; }
#imgWrap > img { max-width: 100%; }
#media screen and (max-width:480px) {
#parent { display: block; }
#parent > div { display: block; width: auto; }
}
<div id="parent">
<div id="imgWrap">
<img src="//lorempixel.com/240/120" />
</div>
<div id="contentWrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. In sit amet condimentum nulla, in elementum lorem. Duis iaculis, nibh nec iaculis semper, nisi neque fringilla metus, in faucibus urna urna non libero. Nullam aliquet ligula lorem, imperdiet lobortis ex malesuada ac. In sollicitudin eros eu dui iaculis, ac rutrum metus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat.
</p>
</div>
</div>
Fiddle: http://jsfiddle.net/abhitalks/29vLq11o/3/
I'm not sure I completely understand your question, but you can set the width of each to 50% and then float them left. They will retain their size side-by-side until the screen becomes to small:
.image {
float:left;
width:50%;
}
.image img {
display:block;
max-width:100%;
}
.text {
float:left;
width:50%;
}
http://jsfiddle.net/rhn76m5z/3/
I have a page like this FIDDLE
body {
margin:0 auto;
max-width: 800px;
padding:0 0 0 0;
text-align:left;
background-color:#FFFFFF;
background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
}
with a repeated background image, but the overlaying text isn't very well legible.
I'd like to put a rectangle (of one color or possibly 50% transparent - maybe another small, half transparent png on repeat?) behind the text so it's easier to read - it should be as wide as the text (800px) and the height should be 100%.
Is that possible? Thanks.
EDIT: To be more clear, I'd like the dark (or semi-transparent) layer to go over the whole page, from top to bottom, so it's behind the logo and possibly the footer as well, not just where the text is
Place the text inside a div with some id and then apply css to that div.
HTML
<img src="http://upload.wikimedia.org/wikipedia/commons/5/59/Logo-Logo.svg" ALT="" BORDER="0">
<br>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat dolor, pulvinar eget erat id, gravida hendrerit nisl. Nunc nec laoreet mi. Donec posuere dui id diam semper, ut venenatis nibh tincidunt. Nulla blandit mattis nulla, sed rutrum metus convallis ut. Maecenas sed massa erat. Fusce augue erat, malesuada eget hendrerit et, viverra ac ligula. Donec eu mi ex. Aenean interdum magna ultrices massa convallis, sit amet varius tortor fringilla. In congue odio sapien.
</div>
CSS
body {
margin:0 auto;
max-width: 800px;
padding:0 0 0 0;
text-align:left;
background-color:#FFFFFF;
background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
}
#content{
background-color: rgba(255, 255, 255, 0.84);
padding: 10px;
text-align: justify;
border-radius: 15px;
}
Check this Fiddle
I have modified the code as per your requirements.
Made some changes to the css to make the logo appear in the center and added a footer.
HTML
<div id="content">
<IMG SRC="http://upload.wikimedia.org/wikipedia/commons/5/59/Logo-Logo.svg" ALT="" BORDER="0" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat dolor, pulvinar eget erat id, gravida hendrerit nisl. Nunc nec laoreet mi. Donec posuere dui id diam semper, ut venenatis nibh tincidunt. Nulla blandit mattis nulla, sed rutrum metus convallis ut. Maecenas sed massa erat. Fusce augue erat, malesuada eget hendrerit et, viverra ac ligula. Donec eu mi ex. Aenean interdum magna ultrices massa convallis, sit amet varius tortor fringilla. In congue odio sapien.</p>
<p>Nam ut nisi varius, pretium nisl vitae, dignissim lectus. Donec vel tortor commodo, congue sem nec, lobortis neque. Pellentesque tortor elit, aliquam vel porttitor ac, luctus a dolor. Proin fringilla, orci id fermentum luctus, dolor felis convallis mauris, et finibus nunc nulla sed massa. Mauris pellentesque felis eget justo commodo tempor id eu magna. Ut auctor massa vel risus viverra lobortis. Aenean vitae turpis vel erat feugiat ullamcorper. In et erat neque. Nulla efficitur turpis nisl, non dictum leo ullamcorper vel. Vestibulum dignissim venenatis est eget cursus. Cras accumsan placerat luctus. Pellentesque elementum risus nisi, in imperdiet tortor iaculis non. Donec malesuada ut felis at vehicula. Proin quis lorem elit. Nunc at nulla convallis lacus euismod maximus convallis id mauris. Quisque rhoncus tincidunt malesuada.</p>
<p>Praesent malesuada interdum pretium. In vulputate turpis fermentum dolor sodales, placerat feugiat nibh sollicitudin. Duis egestas, nisl ac mattis elementum, neque tellus sagittis magna, vitae aliquet justo ex id nulla. Suspendisse sit amet porta nunc. Nulla luctus cursus leo ut maximus. Nullam auctor justo eget eros pulvinar varius. Maecenas condimentum neque sit amet lacus rutrum faucibus. Fusce sodales mattis elementum. Morbi tempor purus felis, maximus viverra lorem venenatis ut. Nulla facilisi. Vestibulum condimentum porta lorem. Maecenas nec placerat elit. Phasellus et nisi tincidunt, ullamcorper erat ut, mollis eros.</p>
<p>Ut scelerisque, quam eu varius consectetur, ex lacus ornare turpis, vitae tempus ex dolor elementum neque. Donec sodales orci nulla, vel semper libero porta nec. Aliquam ut cursus ante. Proin rutrum commodo dui, et posuere purus cursus eget. Mauris egestas vel risus nec consequat. Quisque sit amet leo maximus nunc porta fermentum sit amet non justo. Donec accumsan iaculis suscipit. Phasellus rutrum venenatis neque, dapibus pellentesque eros finibus a. Aliquam tincidunt tortor et ipsum consequat placerat. Vivamus scelerisque libero quis mauris gravida, et tempor elit ultrices. Aenean accumsan porttitor placerat. Phasellus egestas maximus ligula, a imperdiet mi condimentum sit amet</p>
<footer> <span>www.whatever.com © 2015</span></footer>
</div>
css for img
img{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
CSS for footer
footer {
bottom:0;
position:absolute;
background-color:rgb(90, 90, 90);
margin-left: -10px;
width:100%;
height:30px;
line-height:30px;
border-radius:5px;
}
Check this pen
I updated some code.
Try this
body {
margin:0 auto;
max-width: 800px;
padding:0 0 0 0;
text-align:left;
background-color:#FFFFFF;
background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
}
.text-container{
background: rgba(0, 0, 0, 0.49);
padding: 10px;
}
I'm trying to create a sidebar that rests next to the content div but it sits below the content div, it's at the right x position just not the right y.
HTML:
<body>
<div id="framediv">
<div id="headerdiv">
</div>
<div id="content" class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing velit, a pharetra sem dictum vel. Aliquam varius porta est, vitae pulvinar nunc adipiscing in. Maecenas sem eros, gravida nec blandit vel, aliquam at dui. Aliquam ante est, lacinia id laoreet ac, convallis ac magna. Maecenas rhoncus ligula vitae mauris volutpat sed dapibus lectus fringilla. Nam orci metus, molestie eu placerat sit amet, faucibus in libero. Nunc tristique, elit vitae tincidunt rutrum, odio erat blandit nibh, eu facilisis sapien dolor rhoncus risus. Ut eu velit lectus. Sed vitae nisl orci. Nulla vel nisl ante. Donec sit amet nulla eget massa euismod ultrices vitae at nisi. Donec tempor justo auctor libero dapibus viverra. Cras commodo fermentum nisi. Maecenas porttitor euismod metus lacinia sodales. Aliquam egestas ligula purus, id sollicitudin risus. Nullam vel odio et libero viverra blandit vel et dolor.
Nullam mauris dui, consequat a placerat eu, semper non mi. Nam in leo vel lorem adipiscing commodo. Duis vestibulum erat vel felis tincidunt in congue ipsum rutrum. Sed in ipsum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra nisi eget arcu malesuada at dapibus elit varius. Morbi sodales, justo fermentum lobortis elementum, orci turpis vehicula nisl, quis laoreet sapien libero a leo. Aenean ac arcu augue, vitae pellentesque ipsum. Ut nec mauris at nisl luctus tempor a sed turpis. Pellentesque in odio libero, sit amet tincidunt nisl. Duis dictum tortor vitae sem sagittis in molestie nisl interdum. Maecenas mollis adipiscing augue, eget accumsan justo ultrices a. Suspendisse scelerisque justo et nisl consectetur a varius lacus sodales. Duis accumsan iaculis nulla, non pretium metus venenatis et. Sed gravida elementum ipsum sed aliquet.
Vestibulum tincidunt pulvinar aliquet. Nullam bibendum vulputate diam quis mattis. Etiam mollis dui eu quam feugiat pharetra. Donec non tempus eros. Fusce eleifend magna eu lorem imperdiet bibendum rhoncus eget odio. Etiam adipiscing nibh sit amet augue elementum tempus. Etiam hendrerit massa a augue laoreet vitae pretium enim aliquet. Mauris malesuada lorem vitae neque pretium convallis. Sed condimentum semper ipsum, consectetur imperdiet eros interdum eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec adipiscing nisi in erat feugiat tempor. Nunc tincidunt neque non nisl tristique quis ornare elit ornare.
Praesent nec augue ligula, quis iaculis diam. Nam eget felis est, eget pellentesque lectus. Ut suscipit varius magna, ac vestibulum risus egestas ac. Quisque id sapien sed leo luctus faucibus in non leo. Integer sit amet pellentesque velit. Vivamus convallis, lacus nec tincidunt viverra, nunc velit aliquam nisi, eu pretium tellus nisl eget eros. Etiam dolor leo, feugiat vel faucibus ac, ullamcorper quis turpis. Mauris nec felis elit. Donec dignissim ullamcorper arcu. Proin tempor, dui vel malesuada viverra, lacus mauris ullamcorper lacus, eu convallis dolor justo non massa. Maecenas volutpat, leo gravida eleifend pharetra, dolor mauris tempor odio, quis facilisis tellus nisl quis sapien. Donec quam mauris, malesuada id iaculis ut, pellentesque non mauris. Nullam interdum justo id nunc tempor sed consequat quam venenatis.
Curabitur ipsum augue, posuere at adipiscing nec, rutrum in nisi. Ut mattis placerat est aliquam vulputate. Nullam faucibus, libero in facilisis auctor, lectus metus suscipit ligula, quis sollicitudin ligula erat sit amet nisi. Suspendisse et suscipit lectus. Sed fermentum porta lorem, vel congue tortor sollicitudin molestie. Nulla imperdiet purus non velit ornare vestibulum id at massa. Curabitur lorem urna, fermentum ut suscipit sed, pretium sed ante. Nullam ligula ante, aliquam at blandit ac, aliquam in velit. Cras nisl libero, iaculis at rutrum ac, mollis nec tortor. Aenean dignissim viverra molestie. Vivamus ultricies sem purus, tempor pharetra elit. Sed placerat est at turpis eleifend accumsan. Cras metus ante, imperdiet et suscipit ut, interdum eget est. In rutrum imperdiet mi in consectetur.
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
</body>
CSS:
#menudiv{
display:inline-block;
float:none;
padding-bottom:20px;
}
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:980px;
height: 100%;
margin: auto;
}
#headerdiv{
width:950px;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#content.container{
height:100%;
width: 640px;
padding-top:50;
margin-top:50;
padding-left: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#sidebar{
position:absolute
float:left;
float:right;
top:250px;
height:100%;
width: 280px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
Here #html, body you don't need the '#' in front of html. On #sidebar you have
float:left;
float:right;
... don't think you any of it since you're positioning it absolute.
JSFiddle would be helpful as well.
Wrap your content with DIV
<div id="content" class="container">
<div id="maincontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing
velit, a pharetr
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
.container#maincontent {float:left: width:75%} //75% minus paddings minus margins minus borders
.container#sidebar {float:right; width:25%} //25% minus paddings minus margins minus borders
Your question seems a bit contradictory... as does a bit of your code.
If you simply want the sidebar to fall along the right side of the content div, then you could move your sidebar div, in the code, above the content div and assign it a "float: right".
If by "but it sits below the content div" you're referring to the code as opposed to the visual layout, then you can float the content div to the left and remove float on the sidebar (or float: right).
I also noticed that in your #sidebar css you're declaring conflicting floats for both left AND right.
Include float in your container as well.