There is a line gap between first line to second line. How to remove it?
ol {
color: #fff;
list-style-type: decimal;
background: #152a40;
width: 100%;
margin: 50px auto;
padding: 1.2em 30px 1.2em 75px;
line-height: 0;
}
ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 2px;
}
li p {
font: 15px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #eaeaea;
}
<ol>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa
viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
</ol>
The issue originates from the fact that the list item's counter is actually part of the DOM node: therefore, increasing it's font size and therefore its line-height will actually influence how the first line looks like.
For a fool-proof setup, you will want to isolate the counter from the actual <li> content. In order to do this, we can use CSS counters.
Declare a custom counter (let's name it listCounter) on the parent element (<ol> in this case), so that it is reset for each occurrence, e.g. counter-reset: listCounter.
Increment the counter in the nested <li> elements, using: counter-increment: listCounter;. Also, since we are using custom counters, disable the default counter using list-style: none.
Use ::before pseudo-element on the <li> element to display our custom counter, using content: counter(listCounter).
Here is a proof-of-concept example:
ol {
color: #fff;
list-style-type: decimal;
background: #152a40;
width: 100%;
margin: 50px auto;
padding: 1.2em 30px 1.2em 75px;
line-height: 0;
/* Reset counter */
counter-reset: listCounter;
}
ol li {
position: relative;
margin-bottom: 2px;
/* Increment counter by 1 in each <li> */
counter-increment: listCounter;
/* Hide default bullets/list counter */
list-style: none;
/*
* Top padding to accommodate tall list counter
* This value is a trial and error value, used to align baselines of counter and paragraph's first line
*/
padding-top: 18px;
}
ol li::before {
/* Set pseudo-element's content as counter */
content: counter(listCounter) ".";
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
/* Positioning, you decide how you want it to look */
position: absolute;
left: -10px;
top: 0;
}
li p {
font: 15px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #eaeaea;
}
<ol>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa
viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
</ol>
The first line has a larger line height because of the large number in the list. You can resolve this issue by adding line-height: 1; to the ol li
ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 2px;
line-height: 1;
}
It appears the issue is with the font-size/line-height between the li and the p. Set the line-height for the li and p to a closer value, or 1 for the li, and use margin to separate the li items.
ol {
color: #fff;
list-style-type: decimal;
background: #152a40;
width: 100%;
margin: 50px auto;
padding: 1.2em 30px 1.2em 75px;
line-height: 0;
}
ol li {
position: relative;
font: bold italic 45px/1 Helvetica, Verdana, sans-serif;
margin-bottom: 40px;
}
li p {
font: 15px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #eaeaea;
}
<ol>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
</li>
</ol>
Related
I am trying to make the following element (which is back to top link) appear just from a certain height.
As it for now it is always displayed and I would like to appear after some scrolling or even after a fixed size.
I would like to do it with CSS only if possible.
<div style='z-index: 9999; bottom: 3em; right: 3em; position: sticky; width: 32px; text-align: center'>
<a href='#top'>
<i class='fas fa-chevron-up fa-2x'/>
</a>
</div>
Thanks
You can approximate like below
.box {
position:absolute;
display:flex;
top:600px; /* the height you want here*/
left:0;
right:0;
bottom:0;
pointer-events:none;
}
.box a {
position: sticky;
z-index:999;
margin:auto 3em 3em auto;
bottom: 3em;
border-radius: 50%;
background: black;
color: #fff;
padding: 5px 7px;
font-size:16px;
pointer-events:initial;
}
body {
font-size:50px;
position:relative;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur ultrices arcu viverra malesuada. Donec pulvinar luctus lorem, eu consectetur felis interdum et. Nullam libero sem, aliquet eu porttitor ac, ullamcorper eget purus. Quisque tempus diam lorem, in aliquet arcu ullamcorper ut. Pellentesque non commodo tortor. Sed malesuada augue pellentesque diam aliquet, sit amet rhoncus diam mollis. Fusce justo leo, finibus eu turpis sit amet, ultrices condimentum mi. Duis at ornare eros, id venenatis neque. Aliquam blandit hendrerit tempus. Curabitur suscipit ipsum nec accumsan placerat.
<div class="box" >
<a href='#top'>
<i class='fas fa-chevron-up fa-2x'></i>
</a>
</div>
You can also consider a mask trick to hide the element when it's not needed (there is no scroll on the page)
.box {
position:absolute;
display:flex;
top:600px; /* the height you want here*/
left:0;
right:0;
bottom:0;
pointer-events:none;
-webkit-mask:linear-gradient(transparent calc(100vh - 600px),#fff 0);
}
.box a {
position: sticky;
z-index:999;
margin:auto 3em 3em auto;
bottom: 3em;
border-radius: 50%;
background: black;
color: #fff;
padding: 5px 7px;
font-size:16px;
pointer-events:initial;
}
body {
font-size:50px;
position:relative;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur ultrices arcu viverra malesuada. Donec pulvinar luctus lorem, eu consectetur felis interdum et. Nullam libero sem, aliquet eu porttitor ac, ullamcorper eget purus. Quisque tempus diam lorem, in aliquet arcu ullamcorper ut. Pellentesque non commodo tortor. Sed malesuada augue pellentesque diam aliquet, sit amet rhoncus diam mollis. Fusce justo leo, finibus eu turpis sit amet, ultrices condimentum mi. Duis at ornare eros, id venenatis neque. Aliquam blandit hendrerit tempus. Curabitur suscipit ipsum nec accumsan placerat.
<div class="box" >
<a href='#top'>
<i class='fas fa-chevron-up fa-2x'></i>
</a>
</div>
I need some help.
There are a few containers that have text inside. Obviously there is a lot of text, so there have to be scroll. But I don't want text look like it's cut, I want to "blur" the bottom of the single container.
Here are the results: https://jsfiddle.net/rsze93wk/3/
Well, it looks... pretty shitty in my opinion. The bottom of the container should be almost invisible, but I can clearly read it. I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.
There is also a problem, gradient stays in one place when I scroll down. Can you help me solve this? Also, maybe you have any ideas how to make this effect look much better?
Update: the first snippet seems to be buggy on Chrome but works fine on Firefox
You can try to color the text using gradient like below:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
}
.container {
padding: 20px;
border: 1px solid black;
}
.main:not(:first-child) {
margin-top: 20px;
}
.main {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
overflow: auto;
text-align: center;
background: linear-gradient(#000 calc(100% - 50px),white);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>
Another alternative using sticky:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
}
.container {
padding: 20px;
border: 1px solid black;
}
.main:not(:first-child) {
margin-top: 20px;
}
.main {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
overflow: auto;
text-align: center;
}
.main::after {
content:"";
display:block;
height:200px;
margin-top:-200px;
position:sticky;
bottom:0;
background: linear-gradient(transparent calc(100% - 50px),white);
pointer-events:none;
}
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>
And if you want a real blur effect use backdrop-filter:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
}
.container {
padding: 20px;
border: 1px solid black;
}
.main:not(:first-child) {
margin-top: 20px;
}
.main {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
overflow: auto;
text-align: center;
}
.main::after {
content:"";
display:block;
height:20px;
margin-top:20px;
position:sticky;
bottom:0;
pointer-events:none;
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
}
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>
I want to "blur" the bottom of the single container.
Blur is CSS filter (filter: blur(1)) and you can't use it here with the after:: pseudoelement because content of that element is empty.
I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.
This is a good and common solution. To make text bellow the after:: clickable you can add pointer-events: none; to the after::.
There is also a problem, gradient stays in one place when I scroll down.
after:: should be positioned to the .main and in the .main you should have another container with scroll.
I am experimenting a bit with calc on css to define some external space (like an external margin)
For example in this 3 column layout, the resulting width of the central column is a bit diferent than the other two, but I can not figure out how to make the text the same width.
There are some requirements I need.
I need to use only padding, not margin.
I can not add padding to the container C3 in this case.
I want to solve it using the logic under calc. I don't know if the percentages are applied first, or I need to define the paddings first to the computer later solve the percentages...
I prefer to use the border-box model, because it is solving me a lot of problems on other places of my code... but probably I can sacrifice this one.
body {
margin: 0;
padding 0;
}
* {
box-sizing: border-box;
}
p {
text-align: justify;
}
.C3 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.C3>div {
width: 33.33%;
padding: 50px;
}
.C3>div:first-child {
background-color: #DFD;
width: calc(33.33% + 140px);
padding-left: 140px;
}
.C3>div:last-child {
background-color: #FEE;
width: calc(33.33% + 140px);
padding-right: 140px;
}
<section class="C3">
<div>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
<div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>
<div>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>
Any ideas?
Since you're using box-sizing: border-box, the width already includes the padding. The 140px are being added twice.
width: 33.33% is all that's needed.
4castle answer made me realize that yes, I was repeating something, but i found it that was the 50px.
So in my margin I needed to substract 50px from the calc, and now I have 90px.
The diference is subtle but now I have the exact same column text size.
body {margin: 0; padding 0;}
*{box-sizing: border-box;}
p {
text-align: justify;}
.C3 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;}
.C3>div {
width: 33.33%;
padding: 50px;}
.C3>div:first-child {
background-color: #DFD;
width: calc(33.33% + 90px);
padding-left: 140px;}
.C3>div:last-child {
background-color: #FEE;
width: calc(33.33% + 90px);
padding-right: 140px;}
<section class="C3">
<div>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
<div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>
<div>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>
I'm sure there's a simple solution to this, but I've been beating my head up against it for an hour or two and not making much progress.
Basically, I've got a wrapper div (testwrap_outer) containing a secondary wrapper div (testwrap_inner) that holds together an image thumbnail div (test1), and a caption div (test2).
I need the caption div (test2) to scale height according to its content, the secondary wrapper (testwrap_inner) to contain that div and float next to any other secondary wrapper divs, and the main wrapper (testwrap_outer) to contain all of them.
I apologize for doing such a poor job explaining, so I've provided a picture to illustrate what I mean here. Here is a fiddle.
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim. In lacinia aliquam tempus. Nunc sollicitudin ac massa non porttitor. Maecenas quam urna, semper ut mauris id, lacinia consequat libero. Vivamus neque diam, vestibulum a est eget, aliquam tempus magna. Morbi sed tellus lobortis, condimentum mi id, finibus felis.</p>
<div class=testwrap_outer>
<div class=testwrap_inner>
<!-- THUMBNAIL IMAGE -->
<div class=test1>
<img src="http://i.imgur.com/5KObDyq.jpg">
</div>
<!-- THUMBNAIL CAPTION -->
<div class=test2><b>TEST2</b>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim.</div>
</div>
<div class=testwrap_inner>
<!-- THUMBNAIL IMAGE -->
<div class=test1>
<img src="http://i.imgur.com/5KObDyq.jpg">
</div>
<!-- THUMBNAIL CAPTION -->
<div class=test2><b>TEST2</b>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim.</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim. In lacinia aliquam tempus. Nunc sollicitudin ac massa non porttitor. Maecenas quam urna, semper ut mauris id, lacinia consequat libero. Vivamus neque diam, vestibulum a est eget, aliquam tempus magna. Morbi sed tellus lobortis, condimentum mi id, finibus felis.</p>
CSS
body {
background: #cccccc;
font-family: Arial, Helvetica, sans-serif;
min-width: 900px;
}
.testwrap_outer {
border: 1px solid red;
position: relative;
}
.testwrap_inner {
border: 1px solid blue;
float: left;
margin: 5px;
padding: 4px;
width: 296px;
}
.test1 {
border: 1px solid purple;
position: relative;
float: left;
opacity: 1.0;
width: 80px;
height: 80px;
overflow: hidden
}
.test1 img {
height: 100%;
}
.test1 img:hover {
opacity: 0.6;
}
.test2 {
border: 0px solid green;
position: relative;
float: left;
text-align: justify;
text-justify: inter-word;
padding: 6px;
width: 200px;
}
Any help is much appreciated.
Add inside testwrap_outer an empty div with clear:both style. This will tidy up the layout and make the outer div behave as a container supposed to be behave.
Updated fiddle:
http://jsfiddle.net/a3hz8dss/1/
just include overflow:hidden in your class testwrap_outer, also there is no need of position:relative in your code!!
CSS:
.testwrap_outer{
border: 1px solid red;
overflow:hidden;
}
Fiddle Demo
I'm just wonderfin if anyone can tell me if I am on the right track to styling this properly?
with my CSS and HTML like this
#bulletsBox{
position: relative;
height: 382px;
width: 736px;
padding-top: 40px;
padding-bottom: 48px;
padding-right: 102px;
padding-left: 102px;
}
dl#Bullets,#Bullets2, #Bullets3, #Bullets4, #Bullets5, #Bullets6{
position: relative;
height: 210px;
width: 210px;
display: inline;
margin-right: 50px;
list-style-type: none;
}
#Bullets dt,#Bullets2 dt,#Bullets3 dt, #Bullets4 dt,#Bullets5 dt,#Bullets6 dt{
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
font-size: 14px;
color: #969b94;
text-transform: uppercase;
padding-bottom: 12px;
}
#Bullets dd,#Bullets2 dd ,#Bullets3 dd, #Bullets4 dd,#Bullets5 dd,#Bullets6 dd{
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
font-size: 12px;
color: #686869;
margin: 0px;
line-height: 18px;
}
<div id="bulletsBox">
<dl id="Bullets">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets2">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets3" style="margin:0px">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets4">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets5">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl id="Bullets6" style="margin:0px">
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
</div><!--end of bulletsBox-->
it displays how I want it to in Dreamweaver like this
but when I veiw it in a browser it looks like this
You can get rid of the display:inline on #Bullets dt,#Bullets2 dt,#Bullets3 dt, #Bullets4 dt,#Bullets5 dt,#Bullets6 dt and just put float:left instead.
You'll also want to correct the inline style of margin:0px on #Bullets3 and #Bullets6 and replace it with margin-right:0px since I think that's really the only margin value you want to override.
Finally, just use #bulletsBox dl to refer to all the #Bullets elements inside of it. Easier to read and write :)
You need to add float:left; to your rule dl#Bullets, #Bullets2, #Bullets3, #Bullets4, #Bullets5, #Bullets6 {...
Here's a jsFiddle example.
You're working too hard. Let CSS inheritance do the work. All these extra class names are not required.
Note: you do not need to use position:relative unless you plan to use absolute positioning on a child element.
<div id="bulletsBox">
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
<dl>
<dt>web standards</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum malesuada velit, sed fringilla nulla posuere at. Donec dapibus cursus rutrum. Praesent ultrices facilisis vehicula. Praesent vitae urna non magna dictum porttitor. Mauris ut ligula enim.</dd>
</dl>
</div>
CSS:
#bulletsBox {
height: 382px;
width: 736px;
padding-top: 40px;
padding-bottom: 48px;
padding-right: 102px;
padding-left: 102px;
}
#bulletsBox dl {
height: 210px;
width: 210px;
float:left; <--- added this
margin-right: 50px;
list-style-type: none;
}
#bulletsBox dt {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
font-size: 14px;
color: #969b94;
text-transform: uppercase;
padding-bottom: 12px;
}
#bulletsBox dd {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
font-size: 12px;
color: #686869;
margin: 0px;
line-height: 18px;
}