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:

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:

Code:

#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...

Code:


<!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):

Code:

.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; }

HTML Code:

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

result:

Thread: Displaying two divs on the same line

Thread Tools

Search Thread

Displaying two divs on the same line

Bookmarks

Bookmarks

Posting Permissions