I have a centered webpage with fixed width that is being requested that the navbar and footer actually go the entire browser width. Thus breaking out of the container div. The page will never be a fixed height. Is this even possible? Code below. Codepen demo further below.
<div id="content-wrapper">
<div id="content">
<div id="header">
Cu quando epicurei comprehensam pro, ne eam graeco oporteat. Cum at vitae dictas adipiscing, nisl vocent offendit nam ea. Has homero repudiandae no, cu ius nibh magna disputationi. Et sed esse gubergren percipitur. Eu qui vidit congue, at vix ludus mediocritatem, has ipsum persequeris reprehendunt at.
</div>
<div id="nav">Cu quando epicurei comprehensam pro, ne eam graeco oporteat. Cum at vitae dictas adipiscing, nisl vocent offendit nam ea. </div>
<div id="body">
Cu quando epicurei comprehensam pro, ne eam graeco oporteat. Cum at vitae dictas adipiscing, nisl vocent offendit nam ea. Has homero repudiandae no, cu ius nibh magna disputationi. Et sed esse gubergren percipitur. Eu qui vidit congue, at vix ludus mediocritatem, has ipsum persequeris reprehendunt at.
Cum tempor probatus intellegat at, ut nisl consequat vis. Eum an mucius sadipscing. Ad eros sale vivendum quo, mei te nostrud instructior deterruisset. Iudico platonem eos ex, everti voluptatum in his. Ferri habeo blandit eam te. Doctus offendit praesent ius et, assum erroribus est cu.
Cu quando epicurei comprehensam pro, ne eam graeco oporteat. Cum at vitae dictas adipiscing, nisl vocent offendit nam ea. Has homero repudiandae no, cu ius nibh magna disputationi. Et sed esse gubergren percipitur. Eu qui vidit congue, at vix ludus mediocritatem, has ipsum persequeris reprehendunt at.
Cum tempor probatus intellegat at, ut nisl consequat vis. Eum an mucius sadipscing. Ad eros sale vivendum quo, mei te nostrud instructior deterruisset. Iudico platonem eos ex, everti voluptatum in his. Ferri habeo blandit eam te. Doctus offendit praesent ius et, assum erroribus est cu.
</div>
<div id="footer">
Iudico platonem eos ex, everti voluptatum in his. Ferri habeo blandit eam te. Doctus offendit praesent ius et, assum erroribus est cu.
</div>
</div>
</div>
#content-wrapper { width:100%; font-family: Arial, Helvetica, sans-serif;}
#content { width:980px; margin:auto; }
#header { background-color:tan; padding: 20px; margin-bottom:20px;}
#nav {background-color:yellow; padding:20px; margin-bottom:20px;}
#body { background-color: green; padding:20px; margin-bottom:20px;}
#footer { background-color:blue; color:white; padding:20px;}
http://codepen.io/trevoray/pen/QwzPVa
Yep, to do that just put your header and footer outside of content like so:
<div id="content-wrapper">
<div id="header">
<div id="nav"></nav>
</div>
<div id="content">
<div id="body"></div>
</div>
<div id="footer"></div>
</div>
Your header and footer should automatically be 100% width, but to ensure that you can assign a width: 100% to them just in case. And also set margin: 0 on the body element to get rid of the spacing between your divs and viewport.
Related
I have
html, body { width: 100%; height: 100%; }
When i put a div with
div { height: 20%; }
it doesn't resize, it's height depends on its content.
I wish i can obtain a 20%.
Can you help me?
Technically your code should work. Check the demo here:
html, body { width: 100%; height: 100%; }
div{width: 20%}
<!doctype html>
<html>
<body>
<div class="test">
<p>Lorem ipsum dolor sit amet, dicat oportere in duo, te sea movet nominati. Liber exerci partem ei sed, ius eu denique lucilius expetendis. Pro et consectetuer definitiones, vix id augue singulis quaerendum. Ut vis accusamus reformidans, nam te similique omittantur.
An tincidunt dissentiet per, case timeam vix ad, ad modus affert has. Eu fastidii temporibus accommodare sit, percipit vituperata ne duo. Iriure dissentias te vis, est labore possim meliore cu, doming timeam ne sit. Ei has dico modus definitiones, dolorum atomorum suscipiantur ad eam. Facer mollis prodesset ad vis, est pertinax necessitatibus te. Has id iusto argumentum, ut ullum omnium forensibus vel.
Oblique indoctum vis ut. Eam an elitr ignota. Dico maiorum eu sea. Mel illum eirmod nostrud ei, movet malorum nostrud vel ne. Volumus mediocritatem vis ex, ad nostrum appellantur sea, in paulo aliquando vel.
Ea mea dolor accusam intellegat, adhuc phaedrum ei vis. Nam ea atqui homero salutandi, eu laudem quaerendum per. Cu vim legere graeco, vis facer summo albucius ex, pro utinam vulputate in. Ei debitis offendit qui, debet viris copiosae ius ea.
Nam utinam voluptatibus ex, et perfecto repudiandae nec. Ea dolore ponderum partiendo sea, est an fugit ceteros, te vis suas voluptatibus. Falli iuvaret pro ex. Ius at volutpat posidonium contentiones.</p>
</div>
</body>
<html>
This works in FF/Chrome/Opera, and IE 10+, but not IE9; I'm looking for an IE9 solution
The following CSS will to make a set of divs, span, or p tags self-organize into neat columns that can be scrolled horizontally (Only works in WebKit enabled browsers).
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
Here is the example:
$(document).ready(function() {
$(".RightArrow ").click(function() {
$(".columns").animate({
scrollLeft: '+=500'
}, 100);
});
$(".LeftArrow ").click(function() {
$(".columns").animate({
scrollLeft: '-=500'
}, 100);
});
}); //end script
body {
font-family: arial;
}
.columns {
overflow: hidden;
width: 500px;
border: 1px solid #000;
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
padding: 0 20px;
text-align: left;
height: 500px;
overflow: hidden;
position: relative;
}
.notsectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
.arrows {
width: 500px;
}
.RightArrow {
float: right;
cursor: pointer;
}
.LeftArrow {
float: left;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<p>
<a class="">
<h2>
<span class="">1</span>
NUM 1
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">2</span>
NUM 2
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">3</span>
NUM 3
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">4</span>
NUM 4
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">5</span>
NUM 5
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">6</span>
NUM 6
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
</div>
<!--columns-->
<div class="arrows">
<span class="LeftArrow"> Previose </span> <span class="RightArrow"> Next </span>
</div>
https://jsfiddle.net/n5qh89vw/
The reason I want it to work this way is I have straight output from a DB into a list of <div> s and I would like to avoid having to make it more complicated and have to have the output count the number of data items then form the markup into inline divs or tables (as in x number cells will make y columns with rows of 4) as I want to keep this as simple as possible.
Is there a way to get this to work with IE?
According to Can I Use, Multiple column layout is supported in IE 10+. If you need to support older versions of IE there is a CSS multicolumn polyfill (found in the Resources tab at Can I Use).
Now that you've updated your question to specify that you need this for IE9, here is a full example using Adam Wulf's Columnizer jQuery Plugin:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/path-to-local-file/jquery.columnizer.min.js"></script>
<script>
$(function(){
$('.wide').columnize({width:400});
$('.thin').columnize({width:200});
});
</script>
<style>
.column p, .column h1{ padding: 5px; }
body { font-size: 9pt; }
#wrapper { margin: 0px 100px; }
.wide, .thin { clear:both; }
</style>
</head>
<body>
<div id="wrapper">
<div class="wide">
<h1>Lorem ipsum ne justo</h1>
<p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
<p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
<p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
<h1>Tempor essent appetere</h1>
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
<p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
<p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
<h1>Soleat civibus in pri</h1>
<p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
<p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
</div>
<div class="thin">
<h1>Lorem ipsum ne justo</h1>
<p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
<p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
<p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
<p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
<h1>Tempor essent appetere</h1>
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
<p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
<p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
<p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
<h1>Soleat civibus in pri</h1>
<p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
<p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
</div>
</div>
</body>
You'll need to download that file since there's no CDN for it so don't forget to change path-to-local-file to the actual location of the file.
For others who only need to support 10+, the problem here is that you're only using the vendor-prefix versions of the CSS. You need to include the normal version as well:
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-fill: auto;
column-width: 300px;
column-gap: 40px;
This worked for me in IE11:
$(document).ready(function() {
$(".RightArrow ").click(function() {
$(".columns").animate({
scrollLeft: '+=500'
}, 100);
});
$(".LeftArrow ").click(function() {
$(".columns").animate({
scrollLeft: '-=500'
}, 100);
});
}); //end script
body {
font-family: arial;
}
.columns {
overflow: hidden;
width: 500px;
border: 1px solid #000;
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-fill: auto;
column-width: 300px;
column-gap: 40px;
padding: 0 20px;
text-align: left;
height: 500px;
overflow: hidden;
position: relative;
}
.notsectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
.arrows {
width: 500px;
}
.RightArrow {
float: right;
cursor: pointer;
}
.LeftArrow {
float: left;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<p>
<a class="">
<h2>
<span class="">1</span>
NUM 1
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">2</span>
NUM 2
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">3</span>
NUM 3
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">4</span>
NUM 4
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">5</span>
NUM 5
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">6</span>
NUM 6
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
</div>
<!--columns-->
<div class="arrows">
<span class="LeftArrow"> Previose </span> <span class="RightArrow"> Next </span>
</div>
The answer is simple and is NO. If you don't want to put some logic in it and divide the results into specific DIVs then you won't be able to get the desired result. sorry :(
quick question that's been bugging me and I cant work out how to do it. I'm wanting to have an image that's floated to the right of a paragraph of text. No problem, have got that working.
What I'm looking to do is push that image below the text for some of the media queries (say under 768px). I'm having issues doing this due to the image being the first element in the paragraph.
Thanks.
img.right {
float: right;
margin: 0 0 10px 10px;
width: 150px;
height: auto
}
<p><img class="right" src="http://icons.iconarchive.com/icons/matiasam/ios7-style/512/Clear-Tick-icon.png" />Lorem ipsum dolor sit amet, ex cum utinam nullam equidem, eam an virtute antiopam molestiae. Cum expetendis necessitatibus ea. His iisque conceptam ea, vel novum maiorum ea. Has duis tempor at, quo no elit denique fastidii. Eam justo partiendo te. Diam clita detraxit in pri, copiosae accusata sadipscing te nec. Ad soleat quaerendum pro. Id eos causae eirmod, nec libris quidam commodo cu. Vis et vidit dicam. Ipsum eruditi erroribus eam in, eum lucilius sadipscing omittantur id, aliquam adolescens id nam. Ius deleniti constituam no. Ut dicam ridens pro, qui ea viris scriptorem. Sed ei dicam graeci regione, et placerat suscipiantur has. Solum ridens eu mel. Eius omittam ex per. Summo ancillae ex vim, eam eu case dicit, ei sale primis facete sea. An vix omittam accommodare. An usu rationibus sententiae cotidieque, eu natum debet veniam eum, has ad harum urbanitas. Sumo denique ius ut, has ne harum errem moderatius. Duis habemus philosophia ius ea, cu unum vidisse tritani sea. Sit amet menandri vulputate no, ad pri quis noster eripuit. Dolore ornatus impedit ei pro, nam modo interesset ad.Et qui munere dictas noluisse. Detraxit suavitate eos ad. Ius luptatum mnesarchum ei, no quando vivendo pro. Ad suas atomorum est, cetero diceret duo ea, justo adolescens argumentum nec et.</p>
JSfiddle here
I'm sure it's a simple solution, but I haven't been able to figure it out whilst allowing the text to wrap the image at full size.
Thanks in advance!
Try like this: Demo
You can position an image at the bottom, with the help of absolute positioning along with padding bottom(Its value should be equal/greater than image height)
CSS:
p>img {
float: right;
margin: 0 0 10px 10px;
width: 150px;
height: auto
}
#media (max-width:767px) {
p {
position:relative;
height:100%;
padding-bottom:170px;
}
p>img {
position: absolute;
bottom: 0;
left:33%;
}
Solution with CSS is here and with JS is here
With Css
#media (max-width: 768px) {
img.right {
display: none;
}
img.right.visible768{
display: block;
float:none;
}
}
With JS
$(window).resize(function(){
var viewportWidth = $(window).width();
if(viewportWidth <= 768){
$('.right').appendTo('p');
}
else if (viewportWidth >= 769){
$('.right').prependTo('p');
}
});
Is this What you what
fiddle
HTML
<p>
<img class="right" src="http://icons.iconarchive.com/icons/matiasam/ios7-style/512/Clear-Tick-icon.png" />
<span class="desc">Lorem ipsum dolor sit amet, ex cum utinam nullam equidem, eam an virtute antiopam molestiae. Cum expetendis necessitatibus ea. His iisque conceptam ea, vel novum maiorum ea. Has duis tempor at, quo no elit denique fastidii. Eam justo partiendo te. Diam clita detraxit in pri, copiosae accusata sadipscing te nec. Ad soleat quaerendum pro. Id eos causae eirmod, nec libris quidam commodo cu. Vis et vidit dicam. Ipsum eruditi erroribus eam in, eum lucilius sadipscing omittantur id, aliquam adolescens id nam. Ius deleniti constituam no. Ut dicam ridens pro, qui ea viris scriptorem. Sed ei dicam graeci regione, et placerat suscipiantur has. Solum ridens eu mel. Eius omittam ex per. Summo ancillae ex vim, eam eu case dicit, ei sale primis facete sea. An vix omittam accommodare. An usu rationibus sententiae cotidieque, eu natum debet veniam eum, has ad harum urbanitas. Sumo denique ius ut, has ne harum errem moderatius. Duis habemus philosophia ius ea, cu unum vidisse tritani sea. Sit amet menandri vulputate no, ad pri quis noster eripuit. Dolore ornatus impedit ei pro, nam modo interesset ad.Et qui munere dictas noluisse. Detraxit suavitate eos ad. Ius luptatum mnesarchum ei, no quando vivendo pro. Ad suas atomorum est, cetero diceret duo ea, justo adolescens argumentum nec et.</span>
</p>
CSS
p {
display:table;
}
img.right {
float: right;
margin: 0 0 10px 10px;
width: 150px;
height: auto;
display:block
display:table-footer-group;
}
span.desc {
display:table-header-group;
}
Well, if the image is first and you need tho show it below, you have actually only two options.
Use absolute positioning of image (requires you to know its size), or using pseudo tables (no size od image required).
Here is the code: http://jsfiddle.net/yy98w8rj/1/
Pseudo tables:
.right {
float: right;
margin: 0 0 10px 10px;
width: 150px;
height: auto;
}
#media (max-width: 768px) {
p {
display: table;
}
.right {
float: none;
display: table-footer-group;
}
.text {
display: table-header-group;
}
}
<p>
<img class="right" src="http://icons.iconarchive.com/icons/matiasam/ios7-style/512/Clear-Tick-icon.png" />
<span class="text">
Lorem ipsum dolor sit amet, ex cum utinam nullam equidem, eam an virtute antiopam molestiae. Cum expetendis necessitatibus ea. His iisque conceptam ea, vel novum maiorum ea. Has duis tempor at, quo no elit denique fastidii. Eam justo partiendo te. Diam clita detraxit in pri, copiosae accusata sadipscing te nec. Ad soleat quaerendum pro. Id eos causae eirmod, nec libris quidam commodo cu. Vis et vidit dicam. Ipsum eruditi erroribus eam in, eum lucilius sadipscing omittantur id, aliquam adolescens id nam. Ius deleniti constituam no. Ut dicam ridens pro, qui ea viris scriptorem. Sed ei dicam graeci regione, et placerat suscipiantur has. Solum ridens eu mel. Eius omittam ex per. Summo ancillae ex vim, eam eu case dicit, ei sale primis facete sea. An vix omittam accommodare. An usu rationibus sententiae cotidieque, eu natum debet veniam eum, has ad harum urbanitas. Sumo denique ius ut, has ne harum errem moderatius. Duis habemus philosophia ius ea, cu unum vidisse tritani sea. Sit amet menandri vulputate no, ad pri quis noster eripuit. Dolore ornatus impedit ei pro, nam modo interesset ad.Et qui munere dictas noluisse. Detraxit suavitate eos ad. Ius luptatum mnesarchum ei, no quando vivendo pro. Ad suas atomorum est, cetero diceret duo ea, justo adolescens argumentum nec et.
</span>
</p>
Absolute positioning:
p img {
float: right;
margin: 0 0 10px 10px;
width: 150px;
height: auto
}
#media (max-width: 768px) {
p {
position: relative;
height: 100%;
padding-bottom: 170px;
}
p img {
position: absolute;
bottom: 0;
}
}
<p>
<img class="right" src="http://icons.iconarchive.com/icons/matiasam/ios7-style/512/Clear-Tick-icon.png" />Lorem ipsum dolor sit amet, ex cum utinam nullam equidem, eam an virtute antiopam molestiae. Cum expetendis necessitatibus ea. His iisque conceptam ea, vel novum maiorum ea. Has duis tempor at, quo no elit denique fastidii. Eam justo partiendo te. Diam
clita detraxit in pri, copiosae accusata sadipscing te nec. Ad soleat quaerendum pro. Id eos causae eirmod, nec libris quidam commodo cu. Vis et vidit dicam. Ipsum eruditi erroribus eam in, eum lucilius sadipscing omittantur id, aliquam adolescens id
nam. Ius deleniti constituam no. Ut dicam ridens pro, qui ea viris scriptorem. Sed ei dicam graeci regione, et placerat suscipiantur has. Solum ridens eu mel. Eius omittam ex per. Summo ancillae ex vim, eam eu case dicit, ei sale primis facete sea.
An vix omittam accommodare. An usu rationibus sententiae cotidieque, eu natum debet veniam eum, has ad harum urbanitas. Sumo denique ius ut, has ne harum errem moderatius. Duis habemus philosophia ius ea, cu unum vidisse tritani sea. Sit amet menandri
vulputate no, ad pri quis noster eripuit. Dolore ornatus impedit ei pro, nam modo interesset ad.Et qui munere dictas noluisse. Detraxit suavitate eos ad. Ius luptatum mnesarchum ei, no quando vivendo pro. Ad suas atomorum est, cetero diceret duo ea,
justo adolescens argumentum nec et.
</p>
I have a simple page.
HTML and CSS are as follows.
<body>
<div style="background-color:red;">
<div style="background-color:green; width:40%; float:left;">
LEFT
</div>
<div style="background-color:blue; width:60%; float:right;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</div>
</body>
The problem is that the contents of blue div come from php and it causes variable height of blue div. What I want, is to have the height of the left green div to be same as the height of blue div.
I've solved this one using jquery but can I achieve this one only with html and css?
Thanks.
Don't float the elements, wrap the elements using a wrapper div, assign display: table; to the wrapper element, and than assign display: table-cell; to nested elements, that's all you need to achieve what you want to..
Demo
.wrap {
display: table;
width: 100%;
}
.wrap div.one, div.two {
display: table-cell;
width: 50%;
}
.wrap .one {
background: #f00;
}
.wrap .two {
background: #0f0;
}
Depending on which browsers you need to support, you could use CSS flexbox.
Simple example:
div{
display: flex;
}
Demo
CSS Flexbox browser support
margin-bottom: 30px;
is not working on the .box class. I'm trying to add a bit of extra space under the box but its not working.
How can I fix this? Here is my HTML. is there anything else that I should change in the code? to make it better.
Here is my HTML. . . .
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<title>web</title>
<body>
<div id="container">
<div id="header"></div>
<div id="nav" class="navi"> <a class="navi" href="#"> Link </a>
<a class="navi" href="#"> Link </a>
<a class="navi" href="#"> Link </a>
<a class="navi" href="#"> Link </a>
<a class="navi" href="#"> Link </a>
<a class="navi" href="#"> Link </a>
</div>
<div id="content">
<div class="box">
<h1>Lorem ipsum</h1>
<h2>Sub heading</h2>
<p>dolor sit amet, epicurei neglegentur sit an, libris numquam ius ei. Appareat volutpat imperdiet no vim, ut suas aliquid sanctus quo. At duo quot essent suscipit. Vis an atomorum accusamus. Est at nemore ponderum. No nec voluptua conceptam, detraxit splendide disputando nam ea. Ne eum vocibus inimicus democritum, erant praesent eam in, agam ludus verterem an pro. Erant vidisse te vel, vim ei summo honestatis, no libris quidam inermis quo. Blandit sententiae no per. Ullum accumsan praesent usu ut, at usu verterem sententiae. Accumsan signiferumque et sit, id audiam patrioque vix. Ei accusam electram theophrastus eos, sea solet epicuri molestiae ad. No sanctus scriptorem vim. Simul voluptaria scripserit cu his, perfecto petentium cotidieque cu duo. Te mei case ullum assum, mei te sint fugit. Ut minim albucius invenire est, at nec sint utroque. Ei cum legimus fastidii democritum, sit expetenda gubergren ex. Ex dolorem scripserit has, sit in tation theophrastus. Sed veri viderer te, eos porro feugiat ut, mel sanctus impedit phaedrum id. No sit dicant denique adipisci, habemus scaevola mei ne, qui no solum idque verterem. Mei ut etiam everti atomorum. Vis ex tibique appetere, ei sed tota aperiri scripserit. Mei verterem antiopam constituam an, id quodsi tibique quo, detracto iudicabit similique ex his. Graece vocibus mediocrem no pri, cu odio suas his. Sea in fabulas oportere adversarium, eu eos quodsi latine fabellas.</p>
<<p>dolor sit amet, epicurei neglegentur sit an, libris numquam ius ei. Appareat volutpat imperdiet no vim, ut suas aliquid sanctus quo. At duo quot essent suscipit. Vis an atomorum accusamus. Est at nemore ponderum. No nec voluptua conceptam, detraxit splendide disputando nam ea. Ne eum vocibus inimicus democritum, erant praesent eam in, agam ludus verterem an pro. Erant vidisse te vel, vim ei summo honestatis, no libris quidam inermis quo. Blandit sententiae no per. Ullum accumsan praesent usu ut, at usu verterem sententiae. Accumsan signiferumque et sit, id audiam patrioque vix. Ei accusam electram theophrastus eos, sea solet epicuri molestiae ad. No sanctus scriptorem vim. Simul voluptaria scripserit cu his, perfecto petentium cotidieque cu duo. Te mei case ullum assum, mei te sint fugit. Ut minim albucius invenire est, at nec sint utroque. Ei cum legimus fastidii democritum, sit expetenda gubergren ex. Ex dolorem scripserit has, sit in tation theophrastus. Sed veri viderer te, eos porro feugiat ut, mel sanctus impedit phaedrum id.</p>
<h1>Extras</h1>
<p>No sanctus scriptorem vim. Simul voluptaria scripserit cu his, perfecto petentium cotidieque cu duo. Te mei case ullum assum, mei te sint fugit. Ut minim albucius invenire est, at nec sint utroque. Ei cum legimus fastidii democritum, sit expetenda gubergren ex. Ex dolorem scripserit has, sit in tation theophrastus. Sed veri viderer te, eos porro feugiat ut, mel sanctus impedit phaedrum id.</p>h1>Lorem ipsum</h1>
<h2>Sub heading</h2>
<p>No sanctus scriptorem vim. Simul voluptaria scripserit cu his, perfecto petentium cotidieque cu duo. Te mei case ullum assum, mei te sint fugit. Ut minim albucius invenire est, at nec sint utroque. Ei cum legimus fastidii democritum, sit expetenda gubergren ex. Ex dolorem scripserit has, sit in tation theophrastus. Sed veri viderer te, eos porro feugiat ut, mel sanctus impedit phaedrum id.</p>
</div>
</div>
</html>
</body>
Here is my CSS. . .
body {
background: url(images/heart.jpg) bottom left no-repeat fixed;
margin-bottom: 100px;
background-color:#c4c2c9;
}
#
text-transform:uppercase;
font-size: 12px;
font-family:"Times new Roman";
padding-left: 40px;
color:#FFFFFF;
text-decoration:none;
}
A:hover.navi {
color:#FFFFFF;
text-decoration:underline;
}
A:visited.navi {
color:#FFFFFF;
text-decoration:none;
font-size: 12px;
}
p {
word-spacing:3px;
font-size: 12px;
color:#050505;
font-family:"Times new Roman";
}
p2 {
word-spacing:3px;
font-size: 12px;
color:#050505;
font-family:"Times new Roman";
}
h1 {
text-transform:uppercase;
color:#050505;
font-family:"Times New Roman";
letter-spacing:10px;
font-size: 19px;
}
h2 {
text-transform:uppercase;
color:#050505;
padding-bottom: 3px;
border-bottom: solid 2px #d7d7d7;
font-family:"Times New Roman";
letter-spacing:10px;
font-size: 9px;
}
a:link {
color:##050505;
text-decoration:none;
font-size: 12px;
}
a:visited {
color:##050505;
text-decoration:none;
}
a:hover {
color:#050505;
text-decoration:underline;
}
a:active {
color:#050505;
text-decoration:none;
}
that is because your .box was positioned absolute and to add extra bit of space try adjusting the padding-bottom:
Add a div with class .height and give height:30px to it instead of adding margin-bottom:30px
<div id="content">
<div class="box">
<h1>Lorem ipsum</h1>
<p>YOUR CONTENT</p>
<div class="height"></div>
</div>
</div>
Css:
.height {
height: 30px;
}
margin-bottom needs an element to bounce on in act to work. I made an example to explain it, try it here. You'll see that when you a paragraph, that then the first paragraph does have a margin-bottom, but without an element under it it doesn't.
You can solve it to add a padding-bottom to the parent element like this.