div in div position

T

Tarscher

hi all,

This question is probably already answered a zillion times but I
cannot find an answer to my question.

I have a div in a div
<div>
DIV1 text
<div>
DIV 2 Text
</div>
</div>

Is it possible to position the divs that the text from div 2 is next
to the text of div 1?

I get
DIV1 text
DIV 2 text

but want
DIV1 textDIV 2 text

Many thanks
Stijn
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Mon, 06 Aug 2007 09:41:36 GMT
Tarscher scribed:
hi all,

This question is probably already answered a zillion times but I
cannot find an answer to my question.

I have a div in a div
<div>
DIV1 text
<div>
DIV 2 Text
</div>
</div>

Is it possible to position the divs that the text from div 2 is next
to the text of div 1?

I get
DIV1 text
DIV 2 text

but want
DIV1 textDIV 2 text

Many thanks
Stijn
Click to expand...

Use floats.
 
J

Jonathan N. Little

Neredbojias said:
Well bust mah britches and call me cheeky, on Mon, 06 Aug 2007 09:41:36 GMT
Tarscher scribed:


Use floats.
Click to expand...

Or don't use DIV use a SPAN. Depends on what you are trying to do. An
example URL of the real page might help.
 
J

Jonathan N. Little

I've made a mockup of what and why I want to do achieve.You can find
it here: http://www.flickr.com/photos/11036025@N03/1027802383/

I hope this clarifies things.
Click to expand...

Clear as mud. An example page of HTML of what you are trying would be
preferable.

1) "DIV 2 should start where text of DIV 1 stops" Do you mean DIV 1's
line of text should define the left position of DIV 2? Or is DIV 1 to
have a static width?

2) are both DIVs dims to be defined by the contents or do you have
dimensions for both?

3) Are they to have the same height?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Who knows!</title>

<style type="text/css">
..container {
margin: .5em; padding: .5em 9.5em .5em .5em; border: 1px solid black;
color: #000; background-color: #ccc;
position: relative;

/* NOT SURE IF YOU NEED STATIC DIMS */
width: 8em;

height: 20em;

overflow: hidden;
}

..container div {
margin: .5em; padding: .5em; border: 1px solid black;
color: #000; background-color: #ccf;
position: absolute;
top: 0; right: 0;
width: 8em; height: 19em;

}


</style>
</head>
<body>

<div class="container">
DIV 1 text
(but as you can see we cannot advise unless we have a clearer idea of
what you really want to accomplish)
<div>DIV 2 Text</div>
</div>
</body>
</html>
 
T

Tarscher

Tarscherwrote:




Clear as mud. An example page of HTML of what you are trying would be
preferable.

1) "DIV 2 should start where text of DIV 1 stops" Do you mean DIV 1's
line of text should define the left position of DIV 2? Or is DIV 1 to
have a static width?

2) are both DIVs dims to be defined by the contents or do you have
dimensions for both?

3) Are they to have the same height?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Who knows!</title>

<style type="text/css">
.container {
margin: .5em; padding: .5em 9.5em .5em .5em; border: 1px solid black;
color: #000; background-color: #ccc;
position: relative;

/* NOT SURE IF YOU NEED STATIC DIMS */
width: 8em;

height: 20em;

overflow: hidden;

}

.container div {
margin: .5em; padding: .5em; border: 1px solid black;
color: #000; background-color: #ccf;
position: absolute;
top: 0; right: 0;
width: 8em; height: 19em;

}

</style>
</head>
<body>

<div class="container">
DIV 1 text
(but as you can see we cannot advise unless we have a clearer idea of
what you really want to accomplish)
<div>DIV 2 Text</div>
</div>
</body>
</html>
Click to expand...

Many thanks for the reply.

Since I don't know how to implement the html I think it's better to
show an image example.

Jonathan : the example code you provider is almost perfect. An answer
to your questions:
1) Indeed. div2 should start where the text of div1 stops. The text
of div1 will be a name and will have a maximum of 25 characters.
2) Both divs are defined by it's content (which is dynamic, it's a
scripted site). No fixed sizes thus.
3) They don't have the same height. Div2 will contain a title and a
list of names. The height is thus defined by the length of the list
(which is dynamic)

To summarize, the size of the divs is completely defined by the
content (length of name in div1, length od list in div2) and thus
should have no fixed values.

I hope this clears the mud a little bit:)

Many thanks again
 
J

Jonathan N. Little

Tarscher said:
Many thanks for the reply.

Since I don't know how to implement the html I think it's better to
show an image example.

Jonathan : the example code you provider is almost perfect. An answer
to your questions:
1) Indeed. div2 should start where the text of div1 stops. The text
of div1 will be a name and will have a maximum of 25 characters.
2) Both divs are defined by it's content (which is dynamic, it's a
scripted site). No fixed sizes thus.
3) They don't have the same height. Div2 will contain a title and a
list of names. The height is thus defined by the length of the list
(which is dynamic)

To summarize, the size of the divs is completely defined by the
content (length of name in div1, length od list in div2) and thus
should have no fixed values.

I hope this clears the mud a little bit:)

Many thanks again
Click to expand...
Is this a definition list, if so why not use markup as such and style
anyway you wish...may need example *content* to understand fully what
would be the best route...
 
T

Tarscher

Tarscherwrote:







Is this a definition list, if so why not use markup as such and style
anyway you wish...may need example *content* to understand fully what
would be the best route...
Click to expand...

You can find an example of what I want here: http://www.28edegem.be/tree.htm

The div containing SelfMate should also encapsulate the other content
(like shown in the image mockup). This has to be done since the divs
are created dynamic via a scripted site.
The div with Ploeg 1 has to start where Selfmate stops.

I hope this is more clear now?

Regards,
Stijn
 
J

Jonathan N. Little

Tarscher said:
You can find an example of what I want here: http://www.28edegem.be/tree.htm

The div containing SelfMate should also encapsulate the other content
(like shown in the image mockup). This has to be done since the divs
are created dynamic via a scripted site.
The div with Ploeg 1 has to start where Selfmate stops.

I hope this is more clear now?
Click to expand...

1) Looks like a table!
2) Don't use FONT element
3) don't use empty <P></P> to space adjust the margins on the element
4) don't use px for font sizes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>By Table</title>

<style type="text/css">

/* drop oversized Verdana */
body { font: 100% Geneva, Arial, Helvetica, sans-serif; }

td { vertical-align: top; }
td.club { font-size: 1.7em; color: #11dd11; }
td.group { color: #555; }
div.ploeg { font-size: 1.7em; color: #000; }
td.group ol { margin: 0 0 1em 0; padding: 0; }
td.group li { margin: 0; padding: 0; font-size: .8em;
list-style-position: inside;}


</style>

</head>
<body>
<table>
<tr>
<td class="club">SelfMate</td>
<td class="group">
<div class="ploeg">Ploeg I</div>

<div>Tak 1</div>
<ol>
<li>Jan Janssens</li>
<li>Koen Koenen</li>
<li>Frank franken</li>
</ol>

<div>Tak 2</div>
<ol>
<li>Jan Janssens</li>
<li>Koen Koenen</li>
<li>Frank franken</li>
</ol>
</td>
</tr>
</table>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Clickable Div Block 1
How to make a div select work? 5
How can I output an array in sequence to various div's? 2
Trying to add text into an editable div that is in an iframe 0
Div placement 2
How can I add arrows to my FAQ 0
Different font sizes inside same div 2
How can I hide a div using an event listener on multiple checkboxes? 6

Members online

Total: 28 (members: 1, guests: 27)
Robots: 510

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top