I want to indent the text below the image.
This is my original text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices.
Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.
and i want to indent the first line of each paragraph
by the way there's an image above the paragraph.
this is my code
<div class="caption"><img src="/html/images/sample-image.png" alt="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices. Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.<br><br>
how can i solve this in css code?
can anyone solve my problem? Thanks in advance.
wrap both texts in <p> tags
<div class="caption">
<img src="/html/images/sample-image.png" alt="">
<p>Lorem ipsum</p>
<p>Maecenas eu neque </p>
</div>
It would be easier for you to apply css on them in future
Here is the working Pen for you.
You need to write css for paragraph. For complete code take a look at Pen Link Please
p .paragraph{
word-wrap: break-word;
}
Did it solve your problem ?
I would assume you want something simple like this?
That question wasn't very descriptive. Nonetheless, I have made a complete example. Just run the snippet.
Mainly, the important part was this:
.indent {
text-indent: 2em;
}
But I included extra styling to make the answer more complete.
.caption-wrap {
width: 400px;
border: solid 2px #000;
padding: 20px;
}
.caption-wrap p {
margin: 0;
margin-top: 10px;
}
.captioned-image {
display: block;
width: 300px;
margin: 0 auto;
border: solid 2px #000;
}
.indent {
text-indent: 2em;
}
<div class="caption-wrap">
<img class="captioned-image" src="https://static.pexels.com/photos/20974/pexels-photo.jpg" alt="Captioned Image">
<p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices.</p>
<p class="indent">Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.</p>
</div>
Why don't you use the tab special character at the start of each line
add image style like below and wrap each paragraph inside <p> tag
<style>
.caption img{display:block}
</style>
<p>first paragraph</p>
<p>second paragraph</p>
...
Related
I have a simple set up, with a sticky footer. It works fine in a jsbin sandbox, but in the template I am using one of the parent (inner-wrapper in the example) has overflow: hidden css property, what messes up the sticky footer. Is it a way to wrap the main-container with a div and override the inner-wrapper's overflow property? I have tried to add overflow: visible to the div undo-overflow.
Here is the desired result: https://jsbin.com/merikujosa/4/edit?html,css,output or just simple remove the .inner-wrapper's overflow property.
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.inner-wrapper{
overflow: hidden;
}
.undo-overflow {
overflow: visible;
}
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa;
}
.main-content{
}
.main-footer{position:-webkit-sticky; position:sticky; bottom:0; border-color:red;}
<div class="inner-wrapper">
<div class="undo-overflow">
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel condimentum nisl, vel rutrum arcu. Aliquam venenatis nulla ac mi ornare fermentum. Nunc sagittis lobortis turpis, elementum maximus libero pharetra in. Etiam quis nisi vel nisi gravida suscipit sed id eros. Sed nec metus eget arcu dictum interdum. Praesent quis sollicitudin nisl. Maecenas ex sapien, feugiat vitae lectus a, faucibus dignissim lectus. Curabitur eros erat, convallis et lorem vel, faucibus elementum mi. Fusce porttitor ligula id erat mattis gravida. Aenean pharetra a lacus eget volutpat. Proin scelerisque sagittis condimentum. Donec vitae ex nunc. Aliquam dignissim tempor mollis.
Aliquam nec pulvinar arcu, sed sollicitudin nibh. Suspendisse gravida porta elit, id commodo nulla aliquam at. Duis in est consequat, finibus diam vitae, vulputate mauris. Sed blandit tortor ipsum, sed luctus lectus elementum eget. Quisque vel placerat mi, vel lobortis libero. Duis malesuada fermentum dolor, id vehicula ligula imperdiet quis. Quisque ipsum odio, ornare quis tempus in, varius eget nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras egestas fringilla efficitur. Vestibulum vitae vestibulum sem. Nunc vel libero vel nunc vestibulum scelerisque at interdum metus. Aliquam leo nulla, varius in urna non, pellentesque blandit nisl. Nulla laoreet leo justo, nec scelerisque leo tempus id.
Nulla quis fringilla turpis. Nunc vitae justo est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc et justo vel erat porta gravida. Integer rutrum malesuada nulla, sit amet ultricies velit fermentum vel. Nulla at sapien in purus facilisis maximus. Quisque ultrices, elit in elementum iaculis, tellus diam tincidunt est, sed auctor magna ante et nulla. Praesent eu leo consectetur, blandit justo rhoncus, venenatis tellus. Vivamus viverra neque hendrerit ipsum interdum iaculis. Aenean vulputate nunc vel justo congue, et lacinia sapien tempor. Suspendisse non magna velit. Morbi tempus mi id ex varius placerat. Pellentesque eleifend venenatis ante non aliquam. Quisque vel aliquet eros. Curabitur sodales, tellus sit amet placerat dapibus, ligula felis facilisis est, eu scelerisque augue leo in massa.
Duis scelerisque imperdiet sem nec ornare. Maecenas varius, lorem non iaculis suscipit, lacus neque cursus lacus, vitae pretium dolor lectus eget nisl. Quisque finibus porta nibh in accumsan. Donec semper ante nec massa convallis vulputate. Sed blandit vel libero rutrum vestibulum. Aenean eget lacus nec arcu consequat hendrerit nec id velit. Aenean maximus ipsum vel euismod auctor. Aliquam enim libero, lobortis at convallis quis, malesuada eu dui. Nunc eget volutpat odio, sed hendrerit felis.
Quisque convallis aliquet bibendum. Mauris malesuada urna a interdum venenatis. Nunc auctor varius luctus. Vivamus ac ultricies sapien, in suscipit dui. Duis tristique velit ut posuere tincidunt. Cras non laoreet augue, eu bibendum elit. Quisque sed scelerisque lorem, at fringilla orci.
</div>
<footer class="main-footer">FOOTER</footer>
</main>
<br><br><br><br>
</div>
</div>
I'm learning CSS and HTML as I go along, so excuse my ignorance.
I've been trying to create an about me page for the past few hours trying various combinations of CSS and HTML to get this to work but I'm having some trouble. Essentially, I'm trying to have a body of text next to a vertical image. Im trying to get the image on the right to scale so that it is the same height as the body of text and so that the image is slightly seperated from the div.I'd also like it to fill up the division; the images show what I'm trying to achieve.
This is what I've accomplished:
Progress:
What I'm trying to achieve:
Here's the relevant code:
.Row {
display: table;
table-layout: fixed;
/*this was fixed*/
margin-bottom: 5px;
}
.Column {
display: table-cell;
}
.Column #aboutMe {
background-color: rgba(50, 74, 17, 1.00);
margin-right: 20%;
float: left;
}
.Column #aboutMe h1 {
color: white;
padding-left: 10px;
}
.Column #aboutMe p {
color: white;
padding-left: 10px;
padding-right: 10px;
}
.Column #test {
max-height: 100%;
max-width: 100%;
}
<!--About me start-->
<div class="Row">
<div class="Column">
<div id="aboutMe">
<h1 id="blogTitle">What it's all about</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor eros justo, ut facilisis nisi faucibus id. Sed venenatis aliquam rutrum. Maecenas id elementum quam, eget molestie sapien. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Suspendisse eu tristique ligula. Mauris a mollis felis. Vivamus finibus mi quam, ac varius quam pretium in. Etiam fermentum dolor commodo massa fermentum, egestas porta ex bibendum. Vestibulum ac erat sem. Nam
interdum risus et tortor efficitur pretium. Curabitur lobortis massa lectus, non efficitur nisi ornare vel. Proin porttitor commodo libero, quis accumsan dui hendrerit at. Aliquam eget dui placerat, luctus nisi et, auctor mi. Aliquam a convallis
enim. Donec at nisl nec massa mollis convallis.
</p>
<p>
Curabitur tristique lacus non leo dapibus, at mattis est rutrum. Duis vel porttitor neque, nec aliquam nulla. Donec pulvinar, dui sed blandit ultrices, justo leo cursus turpis, vitae vehicula massa nisl nec erat. Vestibulum tincidunt urna non lorem consequat
pulvinar. Curabitur dignissim varius odio, eget dignissim lectus feugiat et. Praesent sit amet euismod purus. Sed lobortis bibendum risus, quis iaculis justo fermentum quis. Integer consectetur pellentesque nibh, eu dignissim odio facilisis sodales.
</p>
<p>
Nullam a felis euismod, sollicitudin enim eget, laoreet sapien. Nullam non nulla aliquet, gravida arcu sed, laoreet libero. Quisque hendrerit lobortis hendrerit. Etiam condimentum urna elit, ac tincidunt erat facilisis ut. Nullam semper leo felis, vitae
dictum dui placerat a. Maecenas ornare, lacus id vestibulum euismod, libero turpis efficitur lectus, ac vehicula odio magna sit amet lacus. Quisque id scelerisque erat. Cras placerat pulvinar libero quis lobortis. Morbi nec sem id risus scelerisque
molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum ex ac lectus porttitor, a varius elit semper. Curabitur laoreet sit amet nisl in varius. Duis eu ipsum ac risus consectetur
porta vitae eget dolor. Sed blandit, leo vitae efficitur auctor, est mi dapibus dui, et iaculis dui odio et neque.
</p>
<p>
Cras libero nibh, ullamcorper sed aliquet euismod, posuere ac erat. Nam eget tincidunt odio. Nam sed justo iaculis, blandit ui non, luctus quam. Fusce nibh ligula, laoreet laoreet eleifend a, convallis ac ex. Aenean interdum elit at erat cursus tincidunt.
Ut a placerat enim. Sed gravida fermentum varius
</p>
<p>
Curabitur vestibulum feugiat gravida. Phasellus aliquet auctor dictum. Sed sed tristique justo, id facilisis quam. Suspendisse mattis erat dolor, ac convallis sem dapibus eget. Aenean tempus posuere nibh, at molestie ante gravida vel. Praesent at accumsan
augue. Fusce volutpat et sem nec ullamcorper. Nam massa urna, sodales ac quam vitae, feugiat vulputate metus. Praesent commodo sit amet nibh in rutrum. Aliquam augue nunc, molestie eget consequat et, pretium nec risus. Sed aliquam massa sapien,
eu suscipit tortor vehicula suscipit. Maecenas et ligula vel metus dignissim vestibulum ac in nulla. Cras id ornare ligula.
</p>
</div>
</div>
<div class="Column">
<img id="test" src="images/about.jpg">
</div>
</div>
<!--About me end-->
I'd really appreciate help on getting this fixed.
Given the problem you describe, I think I would try to go with the grid approach. Making use of this rather recent CSS feature would make it easier for you to have a responsive page while having rather small boilerplate CSS to start with.
You can read more there https://www.w3schools.com/css/css_grid.asp or probably easily find tutorials about the CSS grid.
For your specific problem, here is a small snippet I came up with:
.Row {
display: grid;
grid-template-columns: 8fr 2fr;
grid-template-areas: "content picture";
grid-column-gap: 10px;
}
.Column {
grid-area: content;
}
.Column #aboutMe {
background-color: rgba(50, 74, 17, 1.00);
float: left;
}
.Column #aboutMe h1 {
color: white;
padding-left: 10px;
}
.Column #aboutMe p {
color: white;
padding-left: 10px;
padding-right: 10px;
}
.Picture-Container {
grid-area: picture;
}
.Picture {
width: 100%;
height: 100%;
}
<div class="Row">
<div class="Column">
<div id="aboutMe">
<h1 id="blogTitle">What it's all about</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor eros justo, ut facilisis nisi faucibus id. Sed venenatis aliquam rutrum. Maecenas id elementum quam, eget molestie sapien. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Suspendisse eu tristique ligula. Mauris a mollis felis. Vivamus finibus mi quam, ac varius quam pretium in. Etiam fermentum dolor commodo massa fermentum, egestas porta ex bibendum. Vestibulum ac erat sem. Nam
interdum risus et tortor efficitur pretium. Curabitur lobortis massa lectus, non efficitur nisi ornare vel. Proin porttitor commodo libero, quis accumsan dui hendrerit at. Aliquam eget dui placerat, luctus nisi et, auctor mi. Aliquam a convallis
enim. Donec at nisl nec massa mollis convallis.
</p>
<p>
Curabitur tristique lacus non leo dapibus, at mattis est rutrum. Duis vel porttitor neque, nec aliquam nulla. Donec pulvinar, dui sed blandit ultrices, justo leo cursus turpis, vitae vehicula massa nisl nec erat. Vestibulum tincidunt urna non lorem consequat
pulvinar. Curabitur dignissim varius odio, eget dignissim lectus feugiat et. Praesent sit amet euismod purus. Sed lobortis bibendum risus, quis iaculis justo fermentum quis. Integer consectetur pellentesque nibh, eu dignissim odio facilisis sodales.
</p>
<p>
Nullam a felis euismod, sollicitudin enim eget, laoreet sapien. Nullam non nulla aliquet, gravida arcu sed, laoreet libero. Quisque hendrerit lobortis hendrerit. Etiam condimentum urna elit, ac tincidunt erat facilisis ut. Nullam semper leo felis, vitae
dictum dui placerat a. Maecenas ornare, lacus id vestibulum euismod, libero turpis efficitur lectus, ac vehicula odio magna sit amet lacus. Quisque id scelerisque erat. Cras placerat pulvinar libero quis lobortis. Morbi nec sem id risus scelerisque
molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum ex ac lectus porttitor, a varius elit semper. Curabitur laoreet sit amet nisl in varius. Duis eu ipsum ac risus consectetur
porta vitae eget dolor. Sed blandit, leo vitae efficitur auctor, est mi dapibus dui, et iaculis dui odio et neque.
</p>
<p>
Cras libero nibh, ullamcorper sed aliquet euismod, posuere ac erat. Nam eget tincidunt odio. Nam sed justo iaculis, blandit ui non, luctus quam. Fusce nibh ligula, laoreet laoreet eleifend a, convallis ac ex. Aenean interdum elit at erat cursus tincidunt.
Ut a placerat enim. Sed gravida fermentum varius
</p>
<p>
Curabitur vestibulum feugiat gravida. Phasellus aliquet auctor dictum. Sed sed tristique justo, id facilisis quam. Suspendisse mattis erat dolor, ac convallis sem dapibus eget. Aenean tempus posuere nibh, at molestie ante gravida vel. Praesent at accumsan
augue. Fusce volutpat et sem nec ullamcorper. Nam massa urna, sodales ac quam vitae, feugiat vulputate metus. Praesent commodo sit amet nibh in rutrum. Aliquam augue nunc, molestie eget consequat et, pretium nec risus. Sed aliquam massa sapien,
eu suscipit tortor vehicula suscipit. Maecenas et ligula vel metus dignissim vestibulum ac in nulla. Cras id ornare ligula.
</p>
</div>
</div>
<div class="Picture-Container">
<img class="Picture" src="images/about.jpg">
</div>
</div>
One potential issue though with this approach overall (yours or mine) is that it seems unlikely your picture will look nice given the width or height of it will depend on the screen where the page is displayed.
Hey i have wrapper and container which i divide on 2 sides, left and right. I can't add any colors, backgrounds, fonts or anything to right side. Is this good way to solve this problem or should i be doing something else? And if you know how to fix let me know, i tried using !important but it's not working. Adding jsfiddle and code:
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
}
.rightbox.color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Change your selector from .rightbox.color-box to .rightbox .color-box
CSS Selectors
You need to follow css standards. If you write .rightbox.color-box this means both the classes are there in same div but here you are trying to target .color-box which is children of .rightbox so you need to give space between both classes
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
background: #ccc;
color: red;
}
.rightbox .color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Read brief about css selectors here
Please add this code
#wrapper .leftbox {
float: left;
width: 50%;
padding: 0;
}
#wrapper .rightbox {
float: left;
padding: 0;
padding-right: 0;
background: #000;
width: 50%;
}
I've been practicing with columns lately and I just can't seem to get them right.
This is probably very simple to fix, but I'm pretty bad at web development at the moment. The highlighted section in the picture would obviously look better if it began at the top of the second column, how can I bump it over?
I never know exactly what code to post, so please tell me what you need to see and I'll edit it in as fast as I can.
Thank you for the help!
The break-inside: avoid-column on paragraphs should do the trick, but the browser support is not great. You can try also -webkit-column-break-inside:avoid and page-break-inside:avoid jsfiddle
Try this:
HTML:
<div class="test">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed turpis congue, dignissim nibh eu, ullamcorper neque. Etiam id mi cursus, pellentesque sapien at, volutpat ligula. Sed mattis dapibus dictum. Duis hendrerit ut est in rutrum. Suspendisse in nibh fringilla, congue erat non, euismod eros. Proin at elit ac dolor pharetra gravida quis in quam. Sed fringilla porta quam non tincidunt.
</p>
<p>
Phasellus eget purus et tellus lacinia faucibus non nec massa. Duis mattis vestibulum sagittis. Sed dapibus efficitur velit, vitae lobortis tortor cursus vel. Maecenas eu elementum enim. Nunc porttitor eleifend enim, sit amet dapibus enim hendrerit in. Quisque congue urna ut nulla placerat, ac pretium nisl elementum. Aliquam nec tristique diam. Quisque eget fringilla purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris orci arcu, porta sed ligula vitae, lobortis dignissim massa. Aliquam suscipit finibus augue non tincidunt. Aenean fringilla nulla eget urna ultricies, in imperdiet orci mollis. Pellentesque sit amet mattis ligula, vitae laoreet ex. Mauris molestie sodales condimentum. Vestibulum tortor dolor, scelerisque non molestie nec, mollis eget sapien. Suspendisse commodo magna a est elementum, a faucibus nisl sagittis.
</p>
<p>
Proin facilisis non turpis a consequat. Duis a mi dapibus, tempor velit condimentum, aliquet quam. Ut ut sapien vestibulum orci egestas facilisis. In hac habitasse platea dictumst. Etiam porttitor libero mattis justo finibus, a mattis erat ullamcorper. Donec et ultrices metus, vestibulum dictum est. Sed bibendum sodales egestas. Duis molestie libero at tortor sagittis, sed pellentesque dolor gravida. Pellentesque metus ipsum, varius at gravida ac, maximus id urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Morbi gravida imperdiet mauris, id dictum quam congue in. Integer purus justo, pellentesque vestibulum euismod in, finibus ut neque. Sed imperdiet iaculis blandit. Mauris gravida, nibh quis placerat fringilla, nisl nibh tincidunt neque, et tincidunt dolor ex rutrum quam. In non tellus arcu. Sed feugiat nibh ac lectus volutpat, sed varius augue lobortis. Nullam velit magna, laoreet id egestas vitae, luctus et leo. Fusce ultricies dolor blandit nibh pulvinar, vel maximus augue rhoncus. Curabitur posuere, libero nec mollis eleifend, orci sapien sodales mi, non fringilla sem ligula non leo.
</p>
<p>
Maecenas id lobortis nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mattis tortor ut enim laoreet, blandit dignissim augue sodales. Duis a est diam. Phasellus lobortis aliquam tellus. Sed sit amet elit pulvinar, volutpat dui sit amet, tempus dolor. Nam quis feugiat metus. Quisque dictum dui at sapien pulvinar tincidunt. Aliquam at ornare diam. Nam interdum lobortis urna ac aliquet. Integer in sollicitudin metus. Sed rutrum, dolor non venenatis malesuada, velit enim pulvinar dui, ac sagittis massa ante et arcu. Nullam arcu odio, varius porttitor aliquam congue, lobortis at nibh.
</p>
</div>
CSS:
.test {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
.test p{display:inline-block}
Here you can see how text breaks ONLY in paragraphs and nothing else. No need for dirty hacks, br or stuff like that. See fiddle
I have two <div> elements that I want to position side by side like the following:
+------------+---------+
| navigation | content |
+------------+---------+
I want the navigation <div> to be as large as required, but not larger (shrink-to-fit behaviour). The content <div> then should fill the remaining space.
How do I achieve this positioning with CSS without specifying percentage ratios such as 20% / 80%?
The Code:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style type="text/css">
#nav { float: left; }
#content { overflow: hidden; }
</style>
</head>
<body>
<div id="nav">
<ul>
<li>Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item Long One 4</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate scelerisque pharetra. Cras vitae dolor felis. In hac habitasse platea dictumst. Donec aliquam eros nec massa facilisis rhoncus. Praesent hendrerit metus id quam sodales mattis. Vestibulum odio velit, ornare tempus ultrices et, egestas congue sem. Sed nec felis ut quam volutpat vestibulum eget vel tellus. Aenean mattis, justo in ultrices dictum, enim felis sollicitudin dui, et ornare sem tellus quis ligula. Nam viverra imperdiet lacus et luctus. Curabitur id nunc a risus rhoncus tempor. Proin eu tortor est, vel tempus orci. Donec mattis neque id felis aliquam ac convallis turpis lobortis. Suspendisse potenti.</p>
<p>Vestibulum hendrerit tincidunt elit at congue. Fusce ut nisi sapien, eu adipiscing eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eget diam nibh. Vestibulum tortor nisl, iaculis ultricies imperdiet et, porta nec eros. Proin convallis venenatis felis eget sodales. Integer tincidunt auctor tortor, in vestibulum nunc iaculis suscipit. Nam vitae mi id libero sollicitudin vestibulum. Vestibulum id dui eget nibh hendrerit tempus. Aliquam eu turpis at enim euismod sodales. Vestibulum suscipit purus felis. Donec non metus sem, ac sollicitudin urna. Aenean sed odio nunc, et tristique mi. Cras sodales bibendum sodales. Nunc in risus leo, sed scelerisque lacus. Praesent vel metus velit. Integer commodo nisl eu erat laoreet hendrerit.</p>
<p>Etiam vel sem ut magna commodo facilisis non ut magna. Praesent metus urna, sollicitudin vitae cursus a, imperdiet non libero. Vestibulum at cursus augue. Vivamus fringilla odio in mauris sagittis ultricies. Phasellus quis tincidunt tellus. Curabitur ac pellentesque odio. Morbi enim dui, sollicitudin eu imperdiet at, ultricies vel elit. Ut et tortor tellus, euismod molestie justo. Donec gravida fermentum blandit. Curabitur tincidunt est eget nibh mollis dignissim. Nunc sit amet arcu sapien. Nullam et nulla massa, id dapibus lorem. Nunc luctus sagittis tellus, nec suscipit lacus mollis eget. Nam placerat laoreet tempus. Curabitur lectus leo, ultrices a hendrerit a, pharetra quis neque. Nullam vel fringilla metus. Nunc nisi nunc, laoreet a tempor eget, condimentum ac ante. Duis bibendum orci at massa scelerisque in lobortis tortor fermentum. Cras in mi a dui tristique vulputate vitae ac arcu. Aliquam non odio non purus feugiat luctus.</p>
<p>Maecenas et accumsan odio. Duis lobortis urna sed neque pulvinar condimentum. Curabitur ac nibh ante, eget tincidunt massa. Quisque bibendum, nunc eget ultrices interdum, purus est sodales nulla, in vehicula nisi sem nec nunc. Etiam venenatis, felis vitae sodales condimentum, est erat placerat mi, ut tempus lectus augue id nulla. Duis justo mauris, condimentum ut sodales ac, semper et dolor. Quisque ac nisi velit, non viverra lectus. Sed auctor condimentum est, sit amet semper nibh aliquam sed. Curabitur nisl nisi, egestas quis tempus nec, euismod sit amet diam. Sed pretium lacinia tristique. Aenean congue bibendum velit. Pellentesque leo velit, hendrerit ut pellentesque at, scelerisque in augue. Donec id orci est. Suspendisse tempor, velit ut tempus vestibulum, mauris metus viverra velit, in ornare elit orci et lorem. Maecenas feugiat dictum ipsum at iaculis. Pellentesque auctor neque ut tellus viverra vulputate. Vestibulum eu tellus metus. Praesent accumsan molestie ipsum, tempor vehicula metus cursus ac. Integer aliquet pharetra sodales. Proin adipiscing, odio eget tristique placerat, sem nunc aliquet mauris, vel gravida ligula augue id nunc.</p>
<p>Sed placerat, dui ac accumsan porta, lacus massa molestie nibh, in lacinia enim nisl venenatis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet nulla a lacus accumsan gravida sed a libero. Pellentesque tincidunt metus non libero porta lacinia. Ut non neque in tortor cursus tempor. Duis massa urna, hendrerit eget eleifend at, dapibus quis libero. Nunc accumsan felis ac purus suscipit pretium. Duis rhoncus ultrices tempus. In quis tellus mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis, enim non consequat faucibus, massa ipsum pellentesque ligula, vel rhoncus lacus lacus a justo. Nullam at ultricies metus. Mauris fermentum mollis ipsum at iaculis. Integer porttitor, nisl in interdum auctor, odio augue vehicula nunc, ac gravida lectus nibh id erat. Fusce interdum hendrerit quam ac aliquet. Fusce venenatis risus ac neque porta egestas dictum eleifend mi. Nunc scelerisque interdum molestie. Proin suscipit sem sed libero posuere malesuada.</p>
</div>
</body>
</html>
The Explanation:
Really, this is easy enough to understand. You simply have two divs. The navigation has float: left - this allows the rest of the content to float around it. The content then has overflow: hidden to force it into one column. IE6 will not honor the overflow: hidden, though the float will still work.
Check it out at jsFiddle
Give the navigation <div> a float:left; CSS property.
Or target both with a display:inline; property.
If you make the navigation div and the content div float: left it will not be larger as required; or you can also additionally specify a width! Be aware that the width of both divs together must not become bigger than the amount of space that is available, otherwise the layout will break and they will be under each other!
<style>
#page_wrap { width:996px; margin: 0 auto; }
#nav { float:left; }
</style>
<div id="page_wrap">
<div id="nav">
#nav
</div>
#contents
</div>