# [web] A CSS question

This topic is 4325 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I need some help with a basic CSS effect which is giving me trouble. Let's say that I have the following piece of HTML
<html>
<style>
div {
border: 1px solid black;
font-family: monospace;
}
</style>
<body>
<div>
<img src='picture.whatever' />
*** ** ** * ** *** * **
</div>
<div>
<img src='someotherpicture.whatever' />
*** ** ** * ** *** * **
</div>
</body>
</html>

The result would then look something like the following ASCII art:
+-------------+
|+---+        |
||\ /|        |
|| X |        |
||/ \|        |
|+---+        |
|*** ** ** *  |
|** *** * **  |
+-------------+
+-------------+
|+---+        |
||\ /|        |
|| X |        |
||/ \|        |
|+---+        |
|*** ** ** *  |
|** *** * **  |
+-------------+

What I actually want is this:
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
||/ \|        |
|+---+        |
+-------------+
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
||/ \|        |
|+---+        |
+-------------+

If I were to add the following rule to the style...
div img {
float: left
}

... I would then get something like this:
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
+|/ \|--------+
+---+
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
+|/ \|--------+
+---+

...which is not what I want. If I were to add the following rule to the style...
 div {
position: absolute;
}

...then the div wouldn't be relatively positioned anymore, and would be drawn over each other, like this:
+-------------+
|+---+*** **  |
||\ /|** * ** |
|| X |*** * **|
||/ \|        |
|+---+        |
+-------------+

...which is also not what I want. Does anyone know how I would do this properly?

##### Share on other sites
I would set it up so you have a div acting as a container, then have each element given its own div (one for images and one for the *'s). You can then use the margins and vertical-align to control the positioning.

##### Share on other sites
I'm not certain how you can alter this through CSS only (especially since :after content is not universally supported). You can, however, use:

<html>  <head>    <style>div.inner {   background-color: red;   float: left;    height: 100px;   width: 100px;}  div {  border: 1px solid black;  margin: 2px;}.clear {	clear: both;	border: none;	margin: none;}        </style>  </head>  <body>  <div>    <div class="inner">    </div>    Text text text text text text text text text text text text text text text text text text text.    <br class="clear" />  </div>    <div>    <div class="inner">    </div>    Text text text text text text text text text text text text text text text text text text text.    <br class="clear" />  </div>    </body></html>

##### Share on other sites
The br-tag-with-clearance works perfectly. Thank you, ToohrVyk. It's a pity to have to change the HTML for a pure style issue, but it doesn't seem that there's any way to do this in pure CSS2.1, even with :after.

##### Share on other sites
That's exactly what I'm looking for. Thanks, Sander.

1. 1
2. 2
3. 3
Rutin
21
4. 4
frob
18
5. 5

• 33
• 13
• 10
• 10
• 12
• ### Forum Statistics

• Total Topics
632568
• Total Posts
3007119

×