Positioning div tags

I want to position 2 divs beside each other. The desire is to put the one on the right at an absolute location and have the one on the left 'autostretch'. It can be done with tables but wanted to do it with div tags. Any help would be appreciated.

Feb 17 '07 #1

Subscribe Post Reply

2061

drhowarddrfine

7,435

Expert 4TB

I just threw this together. Something like this?

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

</head>

<body>

<div style="position:relative">

<div style="float:left;width:500px;background-color:yellow;">

    <p>Lorem ipsum vis audire malorum omittantur no, ei usu saepe exerci propriae. Tation scribentur in eos. Te qui paulo graeci cotidieque, in duo nostrud liberavisse. Cu nec saepe affert, ea sit iuvaret dissentias. Has tota intellegam constituam ei, pri te dolorum scaevola, solet neglegentur vis ad.

</p></div>

    <div style="position:absolute;width:200px;right:50px;top:50px;background-color:pink">hello</div>

</div>

</body>

</html>

Feb 18 '07 #2

AricC

1,892

Expert 1GB

I want to position 2 divs beside each other. The desire is to put the one on the right at an absolute location and have the one on the left 'autostretch'. It can be done with tables but wanted to do it with div tags. Any help would be appreciated.

Try something like this:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Test 2 Column</title>

<style type="text/css">

.clsMainContent

{

width: 80%;

height: 90%;

background-color: #ff0000;

position: absolute;

z-index: 0;

}

.clsRightContent

{

left: 80%;

width: 20%;

height: 90%;

background-color: green;

position: absolute;

z-index: 1;

}

</style>
 
</head>

<body>

    <div class="clsMainContent">

    Content Content Content

    </div>
 
    <div class="clsRightContent">

    Smaller Content

    </div>

</body>

</html>

Feb 18 '07 #3

habuchas

Not quite, the right div slides over the left, but thanks for the response.
I appreciate all the help even though it won't completely solve the problem, it gets me think and trying other approaches.

Feb 18 '07 #4

habuchas

Oops, I answered the first post, I thought. Yours is working as I wanted. thanks for the reply. I think it will solve my problem. Thanks.

Feb 18 '07 #5

Similar topics

css positioning works but bloats page

by: Roy | last post by:

I'd like to create a web page that highlights sections of text with different background colors. The sections can overlap. I tried span tags at first, but that broke down depending on how the...

.NET Framework

Viewing problems with Absolute Positioning

by: murali | last post by:

Hello everyone, I used absolute positioning with div tag in my website. The page looks cool as long as someone doesn't try to zoom in by increasing the text size (ctrl++ or thru changing font...

HTML / CSS

Positioning table elements with CSS <div> tags

by: Herbman | last post by:

Hi, I'm trying to position a <tr> ("row") element with CSS. The table itself is positioned with <div> tags. The problem is when I use <div> tags to position the rows within the table nothing...

HTML / CSS

Positioning with 2.0

by: | last post by:

I just installed VS 2005. Was working with 2003 and .Net 1.1. Trying to get the feel for a master page and I'm having some issues. I'm looking for a pretty basic setup. Standard header with an...

ASP.NET

Pixel positioning across multiple printed pages

by: Bart Van der Donck | last post by:

Hello, I'm having a hard time trying to configure printed output that consists of multiple pages. The idea is the following: <div style=" border: 1px solid blue; position: absolute; top:...

HTML / CSS

DIV positioning fine in Firefox but out of place in IE

by: TheCeej | last post by:

I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm...

HTML / CSS

Absolute Positioning within Table Cell Alignment Problem in FireFox (Mozilla)

by: nino9stars | last post by:

Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...

HTML / CSS

positioning

by: K. | last post by:

Hello all! I have a question. I have built a page. I would like to make my page better positioning in the web searchers i.e. in google search browser. There are many companies which do such...

PHP

Extracting Info from Ekahau's Positioning Engine Database

by: final farewell | last post by:

Hello, I am using Ekhau Location Tracking System for an assignment. It is a system that is able to track configured tags attached to people or objects. I am new to the Ekahau Location Tracking...

MySQL Database

absolute positioning in FF

by: somelongusername | last post by:

Hi all, I'm trying to understand how absolute positioning works, and I came across a weird thing in FF. if I use the code below, then the DIV tags are overlayed on top of each other, but the P...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

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++

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

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General