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>
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 10 months ago.
My aim is to have the height of the container limited to that of the image, with the overflow becoming scrollable on the y-axis.
I have tried grid-template-columns: repeat(2, minmax(0, min-content)) but to no avail.
Can some help me out? Such a small styling bug has been bugging me all day ;)
What i'm currently dealing with:
What i'm aiming for:
So, you want the height of the grid to be determined by the height of the image in the right column, not the height of the text in the left column? In that case, you need to remove the text from the flow by wrapping it in an element with position: absolute;. That way, its characteristics don’t affect the rest of the layout.
When you run this snippet, make sure you then click Full Page to see the effect properly.
body {
margin: 1em;
}
.g1 {
margin: 1em 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 1em;
}
.w1 {
position: relative;
}
.w2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
.w2 p:first-child {
margin-top: 0;
}
.w2 p:last-child {
margin-bottom: 0;
}
header, footer {
background-color: cyan;
padding: 1px 1em;
}
<header>
<p>Before</p>
</header>
<div class="g1">
<div class="w1">
<div class="w2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus velit ut metus pellentesque, non tincidunt erat sagittis. Donec mi justo, venenatis sed urna quis, consectetur vulputate lorem. Cras id ipsum at tellus porttitor egestas sit amet id eros. Phasellus aliquet nunc vel consectetur iaculis. Etiam dapibus, tellus sit amet consequat ultricies, sapien ante molestie tellus, nec tincidunt arcu ante vitae diam. Nam sed eros eu tellus gravida ultrices. Pellentesque vestibulum mauris ante, in vehicula massa lobortis sit amet. Nunc vitae mattis dui, quis porttitor justo. Phasellus sed suscipit sapien, ut tincidunt nibh. Phasellus rhoncus, magna quis faucibus malesuada, ipsum augue convallis diam, eu aliquam metus dolor non ante. Mauris accumsan dolor eu magna venenatis, et rhoncus orci varius. Sed eu urna eu tellus elementum mollis ac sit amet felis. Nam ultricies mi mattis nisi interdum lobortis. Nam tincidunt vehicula pretium.</p>
<p>Suspendisse eget aliquet ligula, at molestie dolor. Etiam scelerisque ac orci at scelerisque. Etiam arcu nisi, condimentum id erat viverra, mollis rutrum arcu. Proin ut mi aliquam, dictum nibh ac, varius massa. Aenean vitae ultrices purus. Phasellus eu tellus pretium, fringilla nunc eget, porttitor massa. Nulla pretium commodo velit id scelerisque. Vivamus faucibus volutpat purus id accumsan. In venenatis viverra vehicula. Phasellus quam leo, luctus nec consectetur vel, tincidunt ultrices urna. Integer tristique rutrum arcu, non placerat sapien luctus ut. Proin scelerisque dui ligula, vehicula maximus dolor scelerisque vitae. Curabitur ornare, lectus non ornare venenatis, odio sapien pulvinar erat, a luctus mi lacus vel ante. Sed eu porttitor erat.</p>
<p>Integer gravida maximus magna non finibus. Etiam mollis, nisl in dignissim interdum, nibh purus fringilla diam, sit amet luctus tortor arcu quis nibh. Maecenas consequat massa et libero luctus, nec gravida erat tincidunt. Praesent sed porttitor turpis. Morbi imperdiet finibus tellus, et dignissim neque vulputate in. Mauris vel vulputate sapien. Duis maximus velit at porta varius. Sed vitae gravida arcu, a condimentum leo. Maecenas elementum enim nibh, sed blandit urna pulvinar sit amet. Pellentesque vel efficitur dolor. Etiam at mollis nibh, ac rutrum nunc. Pellentesque auctor eget lorem ac suscipit. Quisque enim tellus, iaculis sit amet enim in, aliquet malesuada erat. Nullam venenatis at ligula sodales rhoncus. Nulla non velit quis tellus finibus pellentesque scelerisque sed ante.</p>
<p>In rutrum, felis vel fermentum malesuada, turpis ex semper nunc, eu tincidunt mauris nulla vel leo. Ut bibendum arcu urna, nec hendrerit nulla finibus ac. Proin ultrices tortor ac dolor consequat interdum. Curabitur at egestas lorem. In risus massa, faucibus at est sit amet, interdum convallis nulla. Sed ultricies leo lacus, sed pharetra risus porttitor vitae. Nunc tempus urna in dui egestas, eget eleifend lorem finibus. Pellentesque auctor nec est et rutrum. Fusce quis tincidunt lacus. Proin efficitur augue sed eleifend venenatis. Aenean mattis sed odio sit amet lobortis. Vivamus nibh arcu, scelerisque ac purus in, fringilla scelerisque orci.</p>
<p>Praesent volutpat ac justo a luctus. Sed eget orci risus. Sed faucibus turpis id ligula congue facilisis. Nulla facilisi. Aliquam egestas rutrum risus id varius. Etiam ac lacinia mi. Mauris sit amet facilisis arcu. Pellentesque metus nibh, vulputate vel dui fringilla, pellentesque dictum sapien. Praesent interdum nisl at sollicitudin maximus. Morbi ligula odio, hendrerit at risus condimentum, dictum mollis lectus. Sed lacinia rutrum maximus.</p>
<p>Sed orci nisl, cursus lobortis condimentum aliquet, rutrum et metus. Vestibulum sit amet dui mi. Mauris eleifend nisi nec elit euismod tristique. Sed feugiat, quam ac finibus pellentesque, orci dolor auctor nibh, vel pharetra odio mi at magna. Proin sed sapien a sapien consequat dapibus ut quis nulla. Maecenas sit amet feugiat metus, in dictum dolor. Ut sed condimentum dolor, nec congue sapien. Etiam aliquet tellus vitae nibh iaculis consectetur. Curabitur quis fermentum urna. Fusce varius ut erat et cursus. Donec nisl quam, placerat in porta id, ultrices ut diam. Aliquam nec lectus hendrerit arcu maximus egestas nec eu nisl. In id ex in risus vulputate aliquam eu sed ligula. Morbi vel blandit leo, commodo vulputate urna.</p>
<p>Donec facilisis vel lectus vel dapibus. Sed cursus felis vitae porttitor commodo. Quisque et nisi nec metus iaculis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit ut tellus pulvinar elementum in ac nisl. Vivamus sagittis ligula ac egestas semper. Integer at gravida ipsum, et molestie ipsum. Etiam vitae metus ut felis vehicula gravida eget vel turpis. Quisque luctus, nibh a lacinia luctus, augue mauris suscipit ex, pulvinar ornare eros nisi ut urna. Phasellus vitae volutpat justo. Nullam ac elit dolor.</p>
<p>Etiam congue odio nunc, a mattis enim ornare eget. Quisque et sodales quam. Aliquam sollicitudin enim non enim interdum consectetur. Nullam bibendum mi sed massa euismod, pulvinar auctor magna dictum. Donec et lorem finibus, vehicula urna eget, ullamcorper massa. Mauris sem orci, dapibus sed consequat sit amet, malesuada et elit. Integer sit amet massa quam. Cras semper pellentesque urna, eget efficitur odio vestibulum vitae. Maecenas semper, sapien sit amet lobortis venenatis, ligula mauris placerat purus, at congue augue sem id mauris. Etiam gravida elit ut rhoncus varius. Ut nec est metus. Maecenas quis posuere diam. Pellentesque quis nulla interdum, consectetur ipsum eleifend, ultrices libero. Morbi tincidunt mauris at lorem egestas imperdiet quis ut est.</p>
</div>
</div>
<div>
<img src="https://onlinepngtools.com/images/examples-onlinepngtools/body-builder.png">
</div>
</div>
<footer>
<p>After</p>
</footer>
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 wrote this sample code:
<div style="display:flex;flex-direction:row;width:100%">
<fieldset style="white-space: nowrap; width:100%; overflow:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis est id posuere pellentesque. Donec sem lacus, consequat id consectetur a, semper in felis. Suspendisse potenti. Nam eu dapibus ex, nec convallis diam. Donec mollis sit amet nunc quis malesuada. Vestibulum semper cursus magna at commodo. Etiam tincidunt enim vel urna tempor dapibus. Praesent posuere nunc lorem, non dignissim ex semper sed. In hac habitasse platea dictumst.</p>
<p>Fusce molestie sapien a erat laoreet maximus. Phasellus id commodo dolor, pellentesque aliquet lacus. Nunc viverra nec mi nec volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius tellus ante, non tincidunt arcu venenatis ac. Praesent non diam varius, tempus magna sed, bibendum dui. Curabitur lobortis leo tellus, a imperdiet est sodales a.</p>
<p>Suspendisse elit leo, feugiat in tortor eu, maximus mollis urna. Fusce gravida auctor sapien, ac lacinia diam. In quis nisl diam. Cras blandit elementum ornare. Nunc quam tortor, semper vitae lacinia quis, pulvinar at arcu. Praesent suscipit, urna vitae viverra tempor, eros nisl mollis enim, at lobortis sapien mi et purus. Donec at pretium purus. Praesent auctor turpis vitae massa semper elementum. Fusce tempus turpis sit amet aliquam rhoncus. Donec ligula mauris, accumsan eget consequat viverra, ultrices ac ipsum. Ut maximus convallis magna, id mattis tortor ornare non.</p>
<p>Suspendisse lacinia mi vel malesuada pretium. Vivamus sagittis vulputate tempus. Mauris feugiat enim et nisl volutpat sollicitudin. Sed eu leo lectus. Donec tempus consequat risus, pharetra tempus urna pharetra non. Aenean vulputate efficitur nisi, non egestas dui faucibus quis. Praesent semper eget neque sed vulputate. Nullam molestie tellus eu malesuada dignissim. Nullam tempus sed elit nec ullamcorper.</p>
<p>Pellentesque urna lorem, cursus quis tortor sit amet, elementum efficitur elit. Morbi blandit faucibus elit vitae finibus. Morbi neque mi, tincidunt non felis eget, mattis ullamcorper mi. Suspendisse potenti. Maecenas nec metus eu erat scelerisque interdum. Vivamus sit amet interdum dolor, sit amet pellentesque mauris. Morbi vehicula purus ac aliquet dictum. Curabitur lacinia purus id leo commodo pellentesque.</p>
</fieldset>
</div>
The fieldset width overflow the screen on chrome, but working fine on IE and Firefox.
check this on different browsers: http://jsfiddle.net/hideyatsu/wpe03rs6/
On Chrome the <fieldset> is given a min-width equal to the width of the content. You can remove this by putting in min-width: 0px; in the <fieldset> style.
http://jsfiddle.net/wpe03rs6/2/
You can put chrome hack css something like this:
#media screen and (-webkit-min-device-pixel-ratio:0)
{
#element { properties:value; }
}
may be this will help you.
Try like this: Demo
body {
overflow-x:hidden;
}
HTML:
<div style="white-space: nowrap; width:100%; overflow:auto;display:block">
<fieldset>... </fieldset></div>
Updated demo
I want to build the following UI behavior:
I have a responsive content followed by a new section, and that new section should have a background image than scrolls with the page, until reaching the top, and then freezes at the top.
I made a research and have found a few similar answers, but can't find anything specific for what I want.
I don't want to use a fixed background image resting at TOP LEFT, as I don't want the image to start at the top of the page.
This question has me off to a good start:
How can I make a div stick to the top of the screen once it's been scrolled to?
This fiddle also has parts of what I'm trying to do, but it's not there yet, and I'm stumped. (I've broken this code somehow, while trying to stumble along on my own. Pretend the big red box is the background image div.
http://fiddle.jshell.net/5y2b4xoL/
Essentially, the background image should not be fixed until it is scrolled to the top of the page, at which point it should become fixed.
Any help is appreciated.
you could use jQuery scroll() so when the scroll comes to your element it will make it stick by changing position,
see the following snippet:
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 155;
// set to whatever you want it to be
if (y_scroll_pos > scroll_pos_test) {
$("#scroller").css("position", "fixed");
$("#scroller").css("top", "0");
} else {
$("#scroller").css("position", "relative");
$("#scroller").css("top", "auto");
}
});
body {
min-height: 1400px;
background:yellow;
margin: 0;
}
h1 {
margin-bottom: 100px;
}
#scroller {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Scroller demo</h1>
<div id="scroller-anchor"></div>
<div id="scroller">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor eros, nec rhoncus nulla. In fringilla, dui vel vehicula luctus,
nunc arcu ultricies nisi, eu adipiscing sapien orci nec justo. Nulla facilisis gravida tempus. Nunc interdum, dolor sed euismod rutrum, odio
turpis rutrum odio, iaculis venenatis nunc sem eu dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc, in fermentum arcu odio
non ipsum. Vivamus bibendum pulvinar sapien a cursus. Nullam lobortis nibh eget odio placerat hendrerit. In non leo turpis, quis posuere augue
</div>
. Mauris auctor commodo quam, quis vulputate orci tincidunt et. Nulla tellus lectus, rhoncus ut malesuada eget, auctor ac ligula. Suspendisse mollis
tempus interdum. Proin non velit in lectus elementum interdum eu eget velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Nam lobortis, est ac elementum tincidunt, lacus dolor lacinia erat, eget ullamcorper augue justo in lectus. Aliquam eros felis,
fringilla sed cursus sit amet, consectetur nec tellus. Vestibulum ultricies auctor erat, ac facilisis felis fermentum id. Quisque sed rhoncus dolor.
Nullam hendrerit justo non lacus rutrum vitae pellentesque velit adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Phasellus pulvinar ultricies sapien, sed consectetur purus condimentum et. Nulla viverra accumsan condimentum. Ut sodales, lacus sed varius
porttitor, odio ipsum tristique odio, ac sollicitudin est urna at sem. Aliquam suscipit porta felis, sit amet aliquet justo ultricies ac. Proin a orci
et eros interdum dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vehicula malesuada pretium.
Suspendisse potenti. Nullam at felis quam. Donec gravida mi et purus pretium vitae placerat lacus porttitor. Donec scelerisque pellentesque sollicitudin.
Nullam et lacinia urna. In velit magna, malesuada quis iaculis a, auctor at felis. Quisque hendrerit aliquam diam vel luctus. Vestibulum venenatis
sapien at libero mattis mattis. Etiam eu aliquet tellus. Cras malesuada ligula non urna auctor a pretium lorem placerat. Quisque pulvinar turpis
non nisi laoreet fringilla. Proin mollis enim id nisi egestas eget varius metus mattis. Nulla viverra dui quis velit gravida sodales. Nulla nec
nisi et ligula viverra eleifend. Aliquam ac lectus at nunc mattis volutpat. Suspendisse elit lorem, gravida nec lobortis non, venenatis nec odio.
Vestibulum et luctus sapien. Donec faucibus blandit urna, nec convallis metus aliquam suscipit. Curabitur fermentum purus ornare mauris auctor tristique.
Cras vel magna sit amet felis tempor dapibus nec id turpis. Duis eu tortor lorem. Nulla dapibus pellentesque enim lobortis feugiat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi iaculis sem ut erat sodales non elementum elit bibendum. Duis ut mi tellus.
Integer consequat ligula mattis tortor aliquam ut hendrerit lacus tempus. Quisque suscipit magna nec nulla accumsan sit amet tempor nisi gravida. Mauris
pulvinar tortor id justo feugiat ultrices. Vestibulum vel ante orci, a venenatis tortor. Duis urna erat, imperdiet iaculis facilisis eu, convallis
et dolor. Suspendisse mauris ligula, luctus a pellentesque vitae, rhoncus eu lectus. Morbi eget leo sed magna varius pretium quis sit amet lectus
. Nunc sagittis molestie congue. Donec aliquet vestibulum dui, non placerat massa pharetra at. Maecenas ac massa elit, eget venenatis elit. Nullam
elementum aliquet nisi, eu luctus libero fringilla sed. Maecenas vitae mauris nisi, a egestas lectus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Donec lobortis malesuada libero, a tempus tortor auctor et. Vestibulum iaculis eleifend neque, et
consequat augue adipiscing sit amet. Integer sodales dictum nibh et suscipit. In congue sollicitudin erat et imperdiet. Proin tellus enim, bibendum
a sollicitudin non, accumsan at nisl. Phasellus vulputate elementum ligula a volutpat. Etiam scelerisque sollicitudin massa id convallis. Duis bibendum
molestie tempus. Vivamus lacinia accumsan quam, at aliquam mauris ultrices at. Sed malesuada faucibus massa, lobortis pharetra diam accumsan a.
Curabitur dignissim nunc vitae erat laoreet a laoreet sem bibendum. Etiam eu varius erat. Integer porttitor porta tincidunt. Nam dictum tellus
bibendum tellus interdum ullamcorper. Phasellus justo lorem, semper in vehicula interdum, vestibulum ac purus. Integer hendrerit lectus at nisi luctus aliquet.
Donec consectetur nisi vel metus viverra porttitor vel non lectus. Proin eget enim sagittis ligula mattis posuere ut varius ligula. Mauris euismod
tempus sem nec pretium. Donec congue suscipit libero, id pretium dolor luctus sed. Donec sed metus id nulla tempor vulputate non vel nisl.
Vestibulum a turpis vitae leo commodo pulvinar eu vitae enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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%;
}