Positioning of appended nodes

571 Contributor

I would like for the two child nodes in the code below to appear side by side. But in all my attempts they are stacked on top of each other.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>
 
<SCRIPT LANGUAGE="JavaScript">

<!--

// Create a div to hold the control.

var controlDiv = document.createElement('DIV');
 
// Set CSS styles for the DIV containing the control

// Setting padding to 5 px will offset the control

// from the edge of the map

controlDiv.style.padding = '5px';

controlDiv.style.borderStyle = 'ridge';

controlDiv.style.width = '500px';
 
// Set CSS for the control border

var controlMC = document.createElement('DIV');

controlMC.style.position = 'relative';

controlMC.style.width = '20%';

controlMC.style.backgroundColor = 'white';

controlMC.style.borderStyle = 'solid';

controlMC.style.borderWidth = '2px';

controlMC.style.cursor = 'pointer';

controlMC.style.textAlign = 'center';

controlMC.title = 'Click to set the map to Home';

controlDiv.appendChild(controlMC);
 
// Set CSS for the control interior

var controlText = document.createElement('DIV');

controlText.style.fontFamily = 'Arial,sans-serif';

controlText.style.fontSize = '12px';

controlText.style.paddingLeft = '4px';

controlText.style.paddingRight = '4px';

controlText.innerHTML = 'Center';

controlMC.appendChild(controlText);
 
//////////////////////////////////////////////////////////////

// Set CSS for the control border

var controlUI = document.createElement('DIV');

controlUI.style.position = 'relative';

controlUI.style.width = '20%';

controlUI.style.backgroundColor = 'white';

controlUI.style.borderStyle = 'solid';

controlUI.style.borderWidth = '2px';

controlUI.style.cursor = 'pointer';

controlUI.style.textAlign = 'center';

controlUI.title = 'Click to set the map to RoadMap';

controlDiv.appendChild(controlUI);
 
// Set CSS for the control interior

var controlText = document.createElement('DIV');

controlText.style.fontFamily = 'Arial,sans-serif';

controlText.style.fontSize = '12px';

controlText.style.paddingLeft = '4px';

controlText.style.paddingRight = '4px';

controlText.innerHTML = 'Map';

controlUI.appendChild(controlText);
 
function myload() {

document.getElementById('myDiv').appendChild(controlDiv); 

}

//-->

</SCRIPT> 

</HEAD>

 <BODY onload="myload()">

<div id="myDiv">

</div>

 </BODY>

</HTML>

Jun 21 '10 #1

Subscribe Reply

1743

Dormilich

8,658

Recognized Expert Moderator Expert

<div>s always appear below each other unless you position them absolutely or cast them to inline elements (both is a CSS setting).

Jun 21 '10 #2

Claus Mygind

571

Contributor

@Dormilich
Can you give a simple example of "casting inline"?

Jun 21 '10 #3

Dormilich

8,658

Recognized Expert Moderator Expert

Expand|Select|Wrap|Line Numbers

display: inline;

mind that an inline element behaves differently from a block element in the text flow.

Jun 21 '10 #4

Claus Mygind

571

Contributor

@Dormilich
Just what I needed thanks. They are just buttons I want to add to the page.

Jun 21 '10 #5

Dormilich

8,658

Recognized Expert Moderator Expert

why not using <button> or <span>, they’re already inline elements.

Jun 21 '10 #6

Claus Mygind

571

Contributor

@Dormilich
I am playing around with google maps and following one of their examples for creating custom controls.

You example worked great in my html editor "editPlus" but not when I ran the code in FireFox. I suppose that is what you meant by "text behaves differently"?

Jun 21 '10 #7

Similar topics

32026

CSS Positioning and Browser Resizing

by: Bryan R. Meyer | last post by:

Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. ...

HTML / CSS

2682

Help with positioning - I'm too stupid

by: Jane Withnolastname | last post by:

I am trying to re-work an old site by replacing the html with css. On the main page, I have a logo image which I needed centred on the initial screen. I found the solution here:...

HTML / CSS

2114

String Builder - not appended

by: Karuppasamy | last post by:

Hi I am using a variable of StringBuilder to form a string. After appending a string of value like this {\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fnil\fcharset0 Verdana;}}

.NET Framework

1839

Append Child Nodes XML in Memory

by: fremenusul | last post by:

I know I have been asking LOTS of xml questions and I really apprecaite all the help. Here is my XML file <?xml version="1.0" encoding="utf-8" ?> <products> <!-- Repeat the structure below...

.NET Framework

2793

css positioning

by: Charles Harrison Caudill | last post by:

with tables there is a clean and algorithmic way to organize things, but with css which is, once you get it working, much cleaner, I have to tweak and patch and hope and pray and curse before...

HTML / CSS

1126

AppendChild removes like nodes?

by: beanweed | last post by:

This is a problem with a ASP.NET application I am writing. The interface allows a user to manipulate an XML document. I have in my xmldocument .. . . <item id="1"> <parents />...

ASP.NET

4016

XSLT: Select nodes in reverse order

by: thrill5 | last post by:

I have an xml document such as: <device> <element>first</element> <element>second</element> </device> I am using this as the source for an xslt transform that goes like <xsl:for-each...

.NET Framework

4096

Remove XMLNamespace from XML Nodes

by: daz_oldham | last post by:

Hi Everyone I have an xml document, and for the purposes of my application, I am going to take a node of the xml (child), add a child to it and then store it into the database for later use. ...

C# / C Sharp

2891

absolute positioning

by: Mark | last post by:

hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img...

HTML / CSS

1055

Getting [] appended to my Doctype when I save xmlDocument.save()

by: Stephen Ward | last post by:

I have a simple little project open a xml file change a few nodes save the file, no big deal. The problem is that the doctype is getting modified when I save the file. So it looks like this:...

.NET Framework

7128

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7006

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7169

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7215

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

4597

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3096

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3088

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1425

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

294

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General