I have just started trying out the shape-outside property in css but I am not able to make it work,no matter how many documentation or blogs I go through. I may have done a silly mistake but I am not not sure about it.
Can someone point out the mistake?
#q {
background-color: #E6C9C9;
/*height: 100%;
width: 100%;*/
float: left !important;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<html>
<head>
<title>Testing Split Div</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo
tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem.
Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes te
est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. Ad sea error labore percipitur.
Amet liber adipiscing vel in, virtute laboramus est ad, an nam probatus convenire definiebas. An ius facete latine epicurei. Aeque dicunt sed cu, vidisse complectitur an per, mel ea quem repudiare. Mel ex liber laoreet, cu eam altera accommodare
consectetuer, illum veritus consetetur pro ad. Hendrerit appellantur adversarium his te, suas liberavisse qui at, rebum ipsum ut mea. Duo ut quodsi accusamus.</div>
</div>
</body>
</html>
You can't use the outside-shape on the element itself, but you can use :before or :after pseudo-element to add a outside-shape to the element. See the following solution using :before:
#q:before {
content:"";
display:block;
height:300px;
width:300px;
float: left;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
#q {
background-color: #E6C9C9;
}
<html>
<head>
<title>Testing Split Div</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo
tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem.
Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes te
est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. Ad sea error labore percipitur.
Amet liber adipiscing vel in, virtute laboramus est ad, an nam probatus convenire definiebas. An ius facete latine epicurei. Aeque dicunt sed cu, vidisse complectitur an per, mel ea quem repudiare. Mel ex liber laoreet, cu eam altera accommodare
consectetuer, illum veritus consetetur pro ad. Hendrerit appellantur adversarium his te, suas liberavisse qui at, rebum ipsum ut mea. Duo ut quodsi accusamus.</div>
</div>
</div>
</body>
</html>
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>
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.
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 created a two column div, but when there is more text on the left div than the right div the line below it pushed up into the right div.
How do I not have the text flow into the right div?
http://jsfiddle.net/wAqrr/
<div id="wrapper-industry">
<div id="wrapper-form">
<div id="form_row">
<div class="form_cell1">
<p>Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu. Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu.</p>
</div>
<div class="form_cell2">
<img height="347" src="http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg" style="display:block; margin:0 auto;" width="385" /></div>
</div>
</div>
<div class="industry-intro rtecenter">
<p>This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column.</p>
</div>
</div>
You need to clear your float
<div style="clear: both"></div>
Fiddle here
You already have display:inline-block; working, and you want the text below the apple in the apply column ... so just move your HTML around, kill the float:left; and you're golden.
Here is an updated jsFiddle, with tweaks to HTML structure and CSS.
<div id="form_row">
<div class="form_cell1">
<p>Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu. Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu.</p>
</div><div class="form_cell2">
<img height="347" src="http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg" style="display:block; margin:0 auto;" width="385" />
<div class="industry-intro rtecenter">
<p>This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column.</p>
</div>
</div>
</div>
</div>
</div>
Notice I eliminated the whitespace between .form_cell1 and .form_cell2, which allows the display:inline-block; elements to not go over the 100% width.
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.