Heyho, i just found a strange visual inconsistence with list elements on my homepage: If the text inside a li element is longer than 1 line, the second line ist not aligned anymore to the first line of the text.
I have replaced the normal list icon, with an selfmade icon by using li:before in my stylesheet and this is causing the error. I can align the first line of the li element just fine, but if the text is longer than the error occur.
So i was wondering if there is a solution to this, without replacing the li:before icon with an image by using list-style-image or background image? Maybe some of you have an idea :)
Just apply list-style-position: outside; to your li elements
li {
list-style-position: outside;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis vel lectus eget elementum. Sed lacinia vulputate egestas. Aenean fringilla, tortor sed tincidunt venenatis, justo enim porttitor quam, quis consequat quam erat a augue. Proin pellentesque
condimentum ante et viverra. Quisque tristique nisl id varius varius. Donec elit magna, auctor vel nunc sed, fermentum euismod ipsum. Aenean ut nisl enim. Curabitur leo est, pharetra at magna ut, pellentesque posuere tortor. Curabitur posuere ut turpis
non sagittis. Vestibulum sit amet libero porttitor, dapibus orci in, tincidunt felis. Pellentesque ac tempor libero, nec lacinia orci. Ut dictum augue faucibus feugiat mollis. Ut turpis justo, placerat ac congue in, co
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis vel lectus eget elementum. Sed lacinia vulputate egestas. Aenean fringilla, tortor sed tincidunt venenatis, justo enim porttitor quam, quis consequat quam erat a augue. Proin pellentesque
condimentum ante et viverra. Quisque tristique nisl id varius varius. Donec elit magna, auctor vel nunc sed, fermentum euismod ipsum. Aenean ut nisl enim. Curabitur leo est, pharetra at magna ut, pellentesque posuere tortor. Curabitur posuere ut turpis
non sagittis. Vestibulum sit amet libero porttitor, dapibus orci in, tincidunt felis. Pellentesque ac tempor libero, nec lacinia orci. Ut dictum augue faucibus feugiat mollis. Ut turpis justo, placerat ac congue in, co
</li>
</ul>
Please add the following style to the list. Below are the example.
ul li {
list-style-position: outside; }
Demo
Just found a solution in combination with the li:before icon replacement:
ul li {
text-indent: -1em;
}
with this i can align the first line, so the error does not occur anymore. Thanks for your help and ideas :)
Related
It was my understanding, that if an element with position:sticky is nested within a parent element: when the parent leaves the viewport, that "sticky" element will leave with it.
Here I have a "sticky" <ul> within a <nav> within <main>. When scrolling through the main element, when the <nav> would normally scroll off-screen, it instead behaves as if it's become position:sticky. However, if I change the display of the <nav> to be either block or inline-block, it behaves as I thought that it would. What's happening here?
body {
border: 2px dotted gray;
padding: 2rem;
}
nav {
display: inline;
}
ul {
top: 0;
position: sticky;
width: 100%;
list-style: none;
padding: 1rem 0;
display: flex;
gap: 1rem;
font-weight: bold;
border: 2px dotted gray;
background: white;
}
<body>
<main>
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
<h1>Main Heading</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis enim ipsum. Quisque vel lacinia urna. Aenean et cursus nisi. Mauris eleifend fermentum elit, id finibus sem varius id. Duis imperdiet massa at velit ultrices gravida id sit amet ipsum. Praesent convallis quis metus nec dignissim. Etiam et odio id odio tincidunt bibendum quis vel urna. Cras ultricies diam eget nisl posuere, vel mollis sapien venenatis. Nulla eu diam hendrerit, gravida dolor vitae, cursus nulla.</p>
<p>Maecenas vulputate viverra diam elementum volutpat. Sed vulputate ac velit et tincidunt. Mauris eget nisl ut mauris eleifend accumsan. Phasellus accumsan ultricies leo, vitae gravida tellus rutrum sed. Proin condimentum pulvinar rhoncus. Duis quis massa ligula. Cras ac est aliquet, facilisis leo nec, scelerisque arcu. Nunc ultricies sollicitudin semper. Nulla varius laoreet posuere. Suspendisse hendrerit nulla id mi rhoncus iaculis. Donec interdum ultricies risus, eget malesuada justo pellentesque placerat. Cras convallis eget dolor in tempus. Ut imperdiet tellus eu nibh bibendum rutrum.</p>
<p>Integer eros purus, porta non rhoncus a, accumsan et lectus. Ut a ullamcorper purus. Proin mattis fermentum lorem varius mollis. Nullam imperdiet, neque auctor sodales molestie, nulla enim suscipit leo, id cursus nibh quam vel neque. Curabitur mauris nunc, varius id pharetra sed, elementum nec tellus. Morbi luctus auctor egestas. Cras accumsan arcu ullamcorper porttitor imperdiet. Sed semper magna nec nibh venenatis, sed laoreet neque malesuada. Aenean sit amet erat molestie, efficitur lacus vitae, laoreet lectus. Proin elit enim, ultrices nec nibh eget, vehicula maximus odio. Nunc egestas dapibus porta. Mauris aliquet bibendum ultrices.</p>
<p>Praesent efficitur sit amet magna bibendum bibendum. In convallis nisl aliquam vulputate gravida. Praesent ornare pretium dapibus. Aliquam malesuada in metus eget eleifend. Morbi at cursus augue, sed sagittis dolor. Pellentesque facilisis urna metus, et maximus risus tristique et. Cras blandit condimentum pulvinar. Fusce mattis egestas tortor, ut aliquam libero ultrices eu. Praesent mauris enim, egestas id tristique in, mollis in tellus. Integer tristique augue quis lorem facilisis, non convallis lorem consequat. Morbi sagittis at mi ac finibus. Vivamus eget diam nec quam lobortis viverra. Morbi viverra ut odio non vehicula.</p>
<p>Proin faucibus tortor quis nisl placerat, eget commodo ante iaculis. Proin quis aliquam ante, a iaculis nisi. Vivamus porta mi et neque ullamcorper mattis. Suspendisse cursus, urna et placerat posuere, risus arcu tempor nunc, eget hendrerit nulla ex maximus ante. Morbi elit mauris, vestibulum vel elementum et, mattis non quam. Quisque aliquet congue quam, id dictum nunc scelerisque in. Mauris ipsum risus, vestibulum venenatis lorem vitae, porta semper ante. Aliquam eu velit vitae neque iaculis vestibulum id a magna. Integer malesuada at lacus ac vulputate.</p>
</div>
</main>
</body>
It's all about "containing block". sticky position doesn't consider the parent element but consider its containing block which is the parent element in most of the cases but in your case it's not because:
For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest ancestor box that is a block container or which establishes a formatting context. ref
sticky is not mentioned there but it behave the same as relative and static (https://www.w3.org/TR/css-position-3/#def-cb)
If you check the definition of sticky you can read:
Identical to relative, except that its offsets are automatically adjusted in reference to the nearest ancestor scroll container’s scrollport (as modified by the inset properties) in whichever axes the inset properties are not both auto, to try to keep the box in view within its containing block as the user scrolls. This positioning scheme is called sticky positioning. ref
So the containing block in your case is no more nav but main
I've been learning HTML and CSS for a little while now but I am pretty self taught so sorry if this seems to be a pretty basic question.
I have this container in the middle of my page (it's a carousel but I don't think that makes a difference) and I'm trying to position two things: a large word on top of it (inside a div) and navigation buttons below it. Currently, I've positioned them both there using position: fixed; and top and left elements. This isn't ideal of course because on mobile and devices of different widths these elements are in completely different positions.
Here's the HTML for the container and navigation buttons, the carousel controls are there too:
<div id="container">
<input hidden type="radio" name="carousel-control" id="button_a" checked/>
<input hidden type="radio" name="carousel-control" id="button_b"/>
<input hidden type="radio" name="carousel-control" id="button_c"/>
<input hidden type="radio" name="carousel-control" id="button_d"/>
<div id="title">explore</div> /*the text I want on top*/
<div id="carousel">
<div class="p-wrapper">
<section class="panel_a">
<h2>Panel a</h2>
<div class="headerdivider"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare faucibus diam id maximus. Fusce at efficitur nunc. Curabitur sed ullamcorper orci. Nam nulla enim, ultricies nec lectus a, commodo volutpat nisi. Pellentesque facilisis lacinia ante, eu pulvinar ante varius a. Fusce tincidunt efficitur tempor. Praesent pretium felis consectetur posuere sagittis. Sed luctus nisl non vestibulum semper. Vivamus mi velit, porttitor ac malesuada at, vulputate venenatis augue.</p>
<p>Morbi faucibus, nisi ac vulputate mattis, turpis tortor maximus nibh, nec interdum lectus sem sit amet enim. Integer non nulla vitae ex gravida egestas. Fusce sodales neque ut erat tempor euismod. Quisque imperdiet rhoncus pellentesque. Fusce vitae efficitur dolor, nec laoreet lacus. Nulla orci purus, cursus sit amet posuere ac, ultrices sed dui. Ut bibendum, dui non euismod lobortis, mi neque pretium lacus, in pulvinar libero mauris eu sem. Morbi ut felis finibus, posuere risus sit amet, malesuada leo.</p>
<p>Nulla quis molestie mi. Cras quis magna dolor. Suspendisse a scelerisque ligula, ullamcorper imperdiet justo. Ut sit amet nisl malesuada, varius turpis quis, convallis urna. Vestibulum sed odio eget lorem porta dapibus. Mauris augue sapien, scelerisque vel neque vitae, vulputate iaculis tellus. Sed accumsan egestas sem congue vehicula. Fusce quis blandit nibh, non bibendum lorem. Integer maximus mi non eros tincidunt pretium. Curabitur tempor nisi a aliquet dictum. Sed pellentesque venenatis ex ac fermentum. Aliquam vitae tincidunt urna.</p>
<p>Nulla sagittis quis purus vitae consequat. Nullam pharetra dignissim tempus. Pellentesque egestas elit vel arcu condimentum euismod ut eu nisi. Fusce erat lectus, placerat quis egestas posuere, sollicitudin non ligula. Suspendisse potenti. Fusce vel leo ultrices, vehicula leo quis, semper quam. Cras mollis quis sem in tempor. Proin sed dui eu arcu efficitur pulvinar at sed leo. Donec rhoncus rhoncus est, eleifend posuere neque aliquet in.</p>
</section>
<section class="panel_b">
<h2>Panel b</h2>
<div class="headerdivider"></div>
{block:AskEnabled}
<p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/spinningsilvers.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>{/block:AskEnabled}
</section>
<section class="panel_c">
<h2>Panel c</h2>
<div class="headerdivider"></div>
<p>Fusce convallis arcu mauris, vitae semper ligula maximus vitae. Morbi a nibh id justo ullamcorper tincidunt. Aliquam et mollis mauris, eu varius metus. Praesent eget mi ac diam congue iaculis. Praesent accumsan euismod tempus. Aenean tempor libero et eros pellentesque molestie. Pellentesque malesuada ligula ut hendrerit laoreet. Ut turpis neque, tempor in ultrices sed, hendrerit ac leo. Nam placerat dolor sit amet ligula bibendum malesuada. Donec sagittis ultricies ex id mattis.</p>
<ul>
<li>Aliquam iaculis enim ut mi bibendum tincidunt.</li>
<li>Nulla quis elit in lorem vulputate laoreet.</li>
<li>Praesent non lacus euismod, ultricies lectus ac, vehicula arcu.</li>
<li>Integer lobortis ipsum vitae velit mollis, at commodo ligula suscipit.</li>
</ul>
<p>Sed ut leo et mi tristique feugiat. Nunc fermentum diam mauris, in ultricies neque tincidunt dictum. Quisque ac odio dignissim, ornare enim condimentum, faucibus erat. Sed tortor turpis, imperdiet dignissim lacus eget, dignissim vehicula lorem. Mauris semper mi lacus, sit amet rutrum lacus tincidunt sed. Curabitur vel nisl eu magna placerat pretium. Curabitur malesuada sagittis tortor, eget volutpat mi pellentesque quis.</p>
</section>
<section class="panel_d">
<h2>Panel d</h2>
<div class="headerdivider"></div>
<p>Aenean maximus accumsan mauris. Praesent rutrum vitae purus et mattis. Nunc at mi et diam pulvinar euismod. Curabitur interdum, leo quis tincidunt pharetra, risus nisl mollis velit, interdum consectetur justo orci in nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus elit turpis, tincidunt non dui et, molestie maximus nisl. Duis pretium eros sed ultricies convallis. Pellentesque vitae tempor lorem, eu laoreet metus. Vivamus sit amet lorem libero. Vestibulum tristique ligula in gravida volutpat. Sed facilisis ipsum velit, et pharetra nisi ullamcorper ut. Maecenas purus dui, tincidunt non ipsum vel, bibendum aliquam elit. Cras rutrum velit diam, semper aliquet libero posuere nec.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut eleifend lacus. Sed fringilla ullamcorper justo, porttitor cursus nisl. Sed et mi aliquet, rutrum erat at, porttitor felis. Mauris consequat mauris id posuere dictum. Proin nec congue purus, nec rhoncus justo. Cras sit amet neque eu ex feugiat auctor at dignissim augue. Sed commodo tellus id erat lobortis, sit amet elementum felis commodo. Ut massa diam, tristique vel lacinia sed, vulputate eget mauris. Fusce lacinia bibendum iaculis.</p>
</section>
</div> <!-- // .p-wrapper -->
</div> <!-- // #carousel -->
<div id="navigation"> /*the nav buttons that will go below*/
<label for="button_a" class="label_a"> <span>about</span> </label>
<label for="button_b" class="label_b"> <span>message</span> </label>
<label for="button_c" class="label_c"> <span>navigate</span> </label>
<label for="button_d" class="label_d"> <span>social</span> </label>
</div> <!-- // #navigation -->
Here's the CSS for the word I'm trying to put above:
#title {
font-family:'Abril Fatface', cursive;
font-size:40px;
position:fixed;
top:140px;
left:135px;
}
Here's the CSS for the navigation that I'm trying to put below:
#navigation {
position:fixed;
bottom:175px;
justify-content:center;
}
Here's a picture of
what I'm looking to get just with better code of course.
I've tried position: absolute; paired with top: 0px; and left: 0px and I tried putting the div for the words to go above in various spots but nothing's working. (Not sure this makes a difference but I'm working with Tumblr code here.) This is my first time posting here and as I mentioned I'm not too too advanced with coding. Thanks!
You could wrap everything that belongs together actually together, meaning inside a wrapper-element. That way, you can simply use display: flex with flex-flow: column on their parent to lay them out in a column.
Then, with the align-items-property, you can say how/where they should align.
For the navigation I have overridden it with align-self: stretch so that I can center its content.
However, one could have also given the parent align-items: stretch (which is default), and the title align-self: flex-start. Both will give the expected result as long as .carousel is the widest element of the three.
As you see, by using a wrapper-element, you don't need to fiddle around with numbers to position them, and as a bonus, you group them together making it actually semantically clear that they belong together.
body {
display: flex;
}
section {
display: flex;
flex-flow: column;
align-items: flex-start;
}
section > .carousel {
border: 1px solid black;
width: 400px;
height: 300px;
}
section > nav {
align-self: stretch;
display: flex;
justify-content: center;
gap: 0.8rem;
}
<section>
<h1>explore</h1>
<div class="carousel"></div>
<nav>
<a>Some link</a>
<a>Another link</a>
<a>A third link</a>
</nav>
</section>
I would like to layout a webpage as sketched in the image:
The main text (a series of div elements) is supposed to go in a main column. I do have occasional images and remarks that relate to the text but with which I don't want to interrupt the actual text flow.
How can I position a given image or "remark" text box to the right of a given div element in the main column?
In the following minimal example, how would I put the img element just to the right of the second div element?
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu condimentum ligula. Fusce sollicitudin quam ornare,
pharetra lorem quis, luctus erat. Nulla convallis velit magna, sit
amet semper erat cursus sed. Praesent non turpis id lectus aliquet
vestibulum. Donec non leo venenatis, commodo dolor eget, facilisis
turpis. Donec dapibus scelerisque orci vel molestie. Vestibulum ut
elit a arcu interdum tempor ut scelerisque enim. Duis maximus ex sit
amet elit scelerisque, ultricies feugiat mauris feugiat. Morbi non
egestas arcu, at semper massa. Ut feugiat metus eget nulla porttitor
lobortis. Praesent lorem lacus, finibus quis blandit a, iaculis sed
mauris. Vivamus aliquam molestie ex, a lacinia erat faucibus non.
Donec scelerisque neque ac ante interdum, vel varius justo tincidunt.
Quisque ultricies nulla in nisi facilisis, et accumsan libero imperdiet.
</div>
<div>Curabitur imperdiet at diam eget rhoncus. Aenean pretium magna
quis sodales ornare. Sed vitae vehicula nisi. Nulla a tristique lectus.
Nam rutrum ut libero viverra porta. In rhoncus leo et mi luctus, at
osuere est commodo. Vestibulum fringilla luctus mi, in consectetur sem
semper non. Phasellus ac augue et purus vulputate suscipit.
Pellentesque tempus imperdiet urna non convallis. Quisque finibus elit
magna, nec finibus ipsum ornare vitae. Vestibulum id sapien est. Maecenas
in mauris sit amet orci facilisis bibendum id sed ante. Vestibulum at
egestas justo. In nibh ex, ullamcorper sit amet urna vel, molestie mattis
tortor. Ut vel felis dolor.
</div>
<img src="img.png"/>
The easy way is to add calc width (for example 100% - 100px for 100px wide column right):
.leave-space-form-right {
width: calc(100% - 100px);
float:left;
}
.put-element-on-right {
float:left;
}
Here is an example:
https://jsfiddle.net/txdue3n0/6/
I have the following HTML:
<div style="float:left; background-color:#0CC;">Floating Left</div>
<div style="background-color:#03C; color:#FFF;">Not floating</div>
Which appears like this in the browser:
How can I make the "not floating" div appear beneath the floating one?
Just add clear: both; into your CSS for the non floating element:
<div style="background-color:#03C; color:#FFF; clear: both;">Not floating</div>
http://jsfiddle.net/Kyle_Sevenoaks/SnAc9/
You need to clear the float
clear:left
since the sense of float:left is to float left to the rest of the content until you clear the float.
If I misunderstood you and you want the second div to let it's content be covered by the floated div ("appear beneath the floating one") you need absolute positioning instead of floating the divs.
Also it is recommended to use separate css-rules instead of inline-styles.
Do you mean that you want the left div to be inset?
http://jsfiddle.net/2xhGC/2/
HTML
<div class="inset">Inset div that is wrapped by the other content.</div>
<div class="article"><!-- start slipsum code -->
<h1>I gotta go</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non justo ante, at auctor odio. Phasellus suscipit facilisis ligula eu dignissim. Praesent eget odio nisi. Sed in hendrerit massa. Aliquam laoreet fermentum sapien, vitae placerat velit pellentesque vel. Aliquam lectus nibh, porttitor non laoreet eget, varius ac enim. Vestibulum feugiat metus rhoncus libero rhoncus commodo. Phasellus id auctor nisi. Sed hendrerit eleifend egestas. Praesent et tristique nunc. Aliquam id velit tortor.</p>
<h1>Uuummmm, this is a tasty burger!</h1>
<p>Nullam tempus mauris id velit lobortis varius. Mauris tempor aliquet diam, eu egestas augue ultricies id. In cursus ullamcorper velit quis viverra. Maecenas non nisi erat. In hac habitasse platea dictumst. Ut ipsum turpis, consequat sit amet aliquet a, rutrum at erat. Vestibulum auctor, risus quis elementum accumsan, elit sem ultrices est, ut interdum sem erat id leo. Aliquam adipiscing ultricies justo, sed facilisis ipsum congue eget. Duis sem elit, faucibus non aliquam eu, pulvinar nec elit.</p>
<h1>Uuummmm, this is a tasty burger!</h1>
<p>Suspendisse venenatis iaculis est in malesuada. Nunc sit amet arcu eleifend felis bibendum rhoncus eget eu ante. Maecenas molestie, purus eget bibendum rhoncus, ipsum orci lobortis enim, sit amet congue nisl urna vitae arcu. Nullam eget ipsum sapien, ac accumsan augue. Suspendisse consequat aliquet commodo. Morbi vel arcu non risus tristique fermentum. Morbi viverra nisl nec dui iaculis pretium. Morbi id viverra erat. Donec molestie euismod ipsum, id commodo purus lacinia at. Ut auctor turpis sit amet erat ullamcorper eu gravida neque iaculis. Sed augue purus, aliquam sit amet faucibus quis, dapibus vitae odio. Nulla mollis faucibus pharetra. Phasellus eleifend sodales nisi id suscipit.</p>
<h1>I can do that</h1>
<p>Curabitur ac sem metus, in ornare lacus. Duis auctor hendrerit viverra. Morbi posuere fermentum laoreet. Suspendisse potenti. Phasellus auctor lacinia tristique. Mauris interdum turpis et libero fringilla a consectetur ligula malesuada. Suspendisse urna neque, sagittis nec suscipit eleifend, imperdiet in arcu. Cras sit amet arcu metus. Curabitur cursus, justo sed tempor volutpat, felis justo dapibus risus, non porta sapien lectus tempor arcu. Nunc vel enim lectus, et iaculis urna.</p>
<!-- please do not remove this line -->
<div style="display:none;">
lorem ipsum</div>
<!-- end slipsum code --></div>
CSS
.inset{
margin:1em;
padding:1em;
background-color:#ff0000;
float:left;
width:75px;
}
.article{
padding:1em;
background-color:#ccffcc;
}
.article p{
line-height:1.4em;
margin-bottom:.6em;
}
You should use clear: left which means the element will not accept floated elements to the left of itself and will therefore jump down beneath it.
You have to "clear: right" the first div...
I need the red box to expand with the blue box content, so they are always both the same size.
The red box is defined as:
.leftMenu{
float:left;
width:20%;
background-image:url(../images/leftMenuBG.jpg);
background-position:bottom;
background-color:#BFDAE3;
background-repeat:repeat-x;
}
Can't seem to get it to work, whatever I try! Any ideas? Thanks!
Simple solution: Use tables.
Semantic solution: Use faux columns.
You will need to wrap the red div around the blue div, so have the blue divs inside, floated right, and then have a clearing div after the blue divs.
<div style="border:solid red 2px;">
<div style="border:solid blue 2px;float:right;width:200px;">
<p>Content here</p>
</div>
<div style="clear:both;"></div>
</div>
Excuse the use of inline styles, these should be in a style sheet.
If you need each div to sit independently of each other and don't mind using JavaScript (as this is only a presentational layer) try this method.
You can use a jQuery plugin for that too. (for example, http://www.cssnewbie.com/equal-height-columns-with-jquery/)
But the Semantic solution: Use faux columns. from Magnar is nice too and doesn't require Javascript.
An additional 'faux column'-method is to (ab)use positioning.
Place both boxes inside a container that's floated (which makes it expand to accomodate floated children) and positioned relatively (which allows us to position child elements inside it).
Then, position the shortest column absolutely, and float the longest column. The container will take on the height of the floated child, and the div with position:absolute will take that height again.
A short example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Columns</title>
<style type="text/css">
html, body {
width: 100%;
}
#container {
width: 100%;
float: left;
position: relative;
border: 2px solid black;
}
#left-box {
position: absolute;
width: 40%;
border: 2px solid red;
background-color: #5555ee;
height: 100%;
}
#right-box {
float: right;
margin-right: 15%;
width: 40%;
border: 2px solid blue;
background-color: #3e3e3e;
}
</style>
</head>
<body>
<div id="container">
<div id="left-box">
- E - x - P - a - N - d - I - n - G -
</div>
<div id="right-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis eros ut sem sollicitudin ultricies. Vivamus pharetra, urna sit amet auctor mollis, risus sem ultrices quam, non condimentum enim leo sit amet tellus. Pellentesque id vehicula nisl. Nulla ut commodo ligula. Sed sit amet ligula purus, at suscipit leo. Nulla quis nulla id est aliquet vehicula. Suspendisse consectetur, nunc in hendrerit dignissim, nisl massa viverra quam, et faucibus augue lorem eu mi. Vestibulum commodo luctus ante, vel placerat metus ullamcorper vel. Sed id imperdiet orci. In hac habitasse platea dictumst. Praesent ac dui orci, vitae pharetra dolor.
</p>
<p>
Aenean enim metus, placerat at hendrerit in, hendrerit in velit. Cras tincidunt blandit sapien, a aliquet elit sollicitudin vitae. Quisque at ligula sem. In hac habitasse platea dictumst. Ut eu magna ipsum, id fringilla massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus consequat metus sed lectus dignissim posuere quis a felis. Mauris in consectetur arcu. Nullam fermentum adipiscing dignissim. Sed quis orci in magna viverra sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas condimentum lectus pretium tortor porta a hendrerit dui pharetra. Etiam est justo, bibendum vehicula vestibulum ac, mattis ut risus. Praesent dapibus nibh id enim vestibulum porta. Donec aliquam urna a diam varius blandit. Nulla interdum ante at arcu vehicula sagittis. Curabitur quam sapien, luctus ac sagittis vitae, tristique a odio. Nulla consequat gravida urna, at bibendum nisl ultricies ac.
</p>
<p>
Vivamus quis metus porta purus aliquet aliquet. Morbi sollicitudin orci ut ligula vehicula sollicitudin. Etiam sed lacus eget leo molestie ullamcorper sit amet ac urna. Cras vitae turpis in sapien dignissim molestie. Curabitur tellus purus, dignissim at adipiscing in, faucibus ac tortor. Duis vitae metus ac urna cursus consequat eget vel quam. Integer bibendum mauris enim, sit amet blandit sapien. Nam in lectus ante. Curabitur lacinia erat sit amet lectus malesuada facilisis. Phasellus et pellentesque enim. Fusce eget tristique est. Suspendisse id dui eu lorem congue tincidunt. Cras libero lectus, placerat eget tristique a, gravida vitae lorem. Sed nec venenatis sapien. Suspendisse tempus orci ut odio venenatis et cursus sem faucibus. Mauris commodo ultricies dictum. Curabitur iaculis, ligula sit amet lobortis hendrerit, eros orci elementum nisi, cursus lacinia nunc felis vitae erat. Donec id elementum ipsum.
</p>
<p>
Mauris id mi sed augue egestas vestibulum non a ipsum. Ut arcu purus, consequat in tincidunt in, pretium a dui. Cras in quam tellus, non ultricies nisi. Sed leo orci, gravida et luctus sed, eleifend quis odio. Praesent cursus feugiat neque, tincidunt malesuada libero egestas sit amet. Etiam nisi nisi, faucibus vitae accumsan sed, gravida ut lacus. Suspendisse hendrerit fringilla interdum. Cras fermentum nibh non eros gravida pretium et a sem. Sed non nisl dui, non commodo arcu. Donec nec massa mi, vel auctor odio. Curabitur sagittis velit id felis egestas iaculis. Nunc pharetra magna eu metus malesuada ut porta mi suscipit. Aenean vitae elit sit amet neque pellentesque malesuada. Aliquam eu nulla consectetur est adipiscing vulputate non a odio. Sed consectetur neque eros. Nulla fermentum vehicula vestibulum. Aenean eleifend, nisi eget porta accumsan, tellus orci tincidunt metus, volutpat lobortis quam augue commodo tellus. Aenean consectetur pretium vestibulum. Pellentesque a scelerisque sem. Cras pellentesque tortor euismod magna viverra mollis.
</p>
<p>
Mauris dignissim sodales placerat. Sed id interdum erat. Nunc sagittis, nunc in auctor ullamcorper, nisi dolor commodo sem, sit amet aliquam diam dolor posuere est. Ut vestibulum elit ut urna imperdiet non tincidunt sapien euismod. Fusce ut sem erat, aliquam accumsan metus. Proin sed velit nec velit laoreet dignissim at sit amet ante. Pellentesque ac dolor non nulla dapibus lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non nisl diam. Sed et ligula sed libero porttitor semper eget eu elit. Phasellus quis massa dolor. Phasellus ac justo ac diam ultrices iaculis quis at odio. Fusce eget nisi nunc. Cras cursus, dui eget mattis rutrum, arcu dolor sollicitudin nibh, eu congue augue quam ut leo. Praesent in est nulla, eu ullamcorper enim. Nullam in adipiscing ligula.
</p>
</div>
</div>
</body>