Displaying two divs on the same line [Archive]

View Full Version : Displaying two divs on the same line

windbrand

01-06-2012, 08:54 PM

Does anyone know an easy way to display two divs on the same line? The two divs are in a parent div that sets its position. This is the code:

<div id="legend">
<div id="greenbox"></div> <div class="legendtext">= originals</div>
<br>
<br>
<div id="bluebox"></div> <div class="legendtext">= arrangements</div>
</div>

CSS:

#legend {
position:absolute;
float:right;
top:200px;
right:75px;
width:200px;
}

.legendtext {
display:inline;
}

#greenbox {
width:8px;
height:8px;
background-color:#006633;
}

#bluebox {
width:8px;
height:8px;
background-color:#06F;
}

This is how I want it to look, where [greenbox]/[bluebox] is just a 8 pixel colored box by CSS:
[greenbox] = originals
[bluebox] = arrangements

But this is how it appears:
[greenbox]
= originals
[bluebox]
= arrangements

I've tried "display:inline;" and "float", neither works.

coothead

01-06-2012, 10:20 PM

Hi there windbrand,

here is a totally different way of tackling your problem, which may amuse you...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
margin:10px;
background-color:#f0f0f0;
}
ul {
float:right;
width:200px;
margin:170px 75px 0 0;
list-style-type:square;
font-family:verdana,arial,hevetica,sans-serif;
font-size:20px;
background-color:#fff;
box-shadow:#333 4px 4px 4px;
}
li {
padding:10px 0
}
#green {
color:#063;
}
#blue {
color:#06f;
}
ul span {
float:left;
margin:8px 0 0 -5px;
font-size:10px;
color:#000;
}
</style>

</head>
<body>

<ul>
<li id="green"><span>= originals</span></li>
<li id="blue"><span>= arrangements</span></li>
</ul>

</body>
</html>

coothead

windbrand

01-07-2012, 10:57 PM

Thanks the list idea works. I had to slightly modify it and remove the extra styling.
I guess a much easier way is to just use an image for a bullet. Is there a way to change the size of the list bullet?

coothead

01-07-2012, 11:05 PM

Hi there windbrand,

as your seemed to want to have an 8px by 8px square, I set the ul font-size to 20px.

Increasing that value will make the bullet larger. ;)

coothead

traq

01-08-2012, 03:04 AM

alternatively (a little closer to what you were trying to do):

.legendtext{ width: 200px; font-size: 16px; }
.greenbox,.bluebox{ width: 8px; height: 8px; display: inline-block; margin: 2px 6px; }
/* adjust margin as desired for spacing */
.greenbox{ background: #006633; }
.bluebox{ background: #06F; }

<div class="legendtext">
<div class="greenbox"></div>
= originals
</div>
<div class="legendtext">
<div class="bluebox"></div>
= arrangements
</div>

result: