Positioning two divs side by side

How do I do it? I've been trying to work it out for ages but no amount of google searches have lead me to the answer. I have two divs, and when they're put in the container on their own they position perfectly, but as soon as I add the second div, everything DIES!!!!!! :(

Here's my code:

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>

Oliver's Blog

</title>
 
<style type="text/css">
 
body {

    background: #00A5DE; 

    background-image: url('Layout/blog_layout.png');

    background-repeat: no-repeat;

    background-position: top center;

    }
 
div.content{

    margin-left: auto;

    margin-right: auto;

    width: 700px;

    height: 750px;

    border: 1px solid #000000;

    }
 
div.nav     {

    position: relative;

    z-index: 1; 

    height: 475px;

    width: 195px; 

    top: 245px;

    float: left;

    border: 1px solid #000000

    }
 
div.blog {

    position: relative;

    z-index: 1;

    height: 450px;

    width: 467px;

    top: 230px;

    left: 226px;

    border: 1px solid #000000

    }

</style>

</head>
 
<body>
 
<div class="content">
 
<div class="nav">

This is a piece of test writing

</div>
 
<div class="blog" style="clear: both">

This is another piece of test writing

</div>
 
</div>
 
</body>

</html>

Any help?
Thankyou :)

Aug 31 '07 #1

Subscribe Post Reply

25352

spacix

use spans inside your content div instead of more divs if you want them to be side-by-side and then they wont line break (span and div are mostly the thing except for the break at end) and you won't need the z-index anymore too!

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>

Oliver's Blog

</title>
 
<style type="text/css">
 
body {

    background: #00A5DE; 

    background-image: url('Layout/blog_layout.png');

    background-repeat: no-repeat;

    background-position: top center;

    }
 
div.content{

    margin-left: auto;

    margin-right: auto;

    width: 700px;

    height: 750px;

    border: 1px solid #000000;

    }
 
div.nav     {

    position: relative;

    height: 475px;

    width: 195px; 

    top: 245px;

    float: left;

    border: 1px solid #000000

    }
 
div.blog {

    position: relative;

    height: 450px;

    width: 467px;

    top: 230px;

    left: 226px;

    border: 1px solid #000000

    }

</style>

</head>
 
<body>
 
<div class="content">
 
<span class="nav">

This is a piece of test writing

</span>
 
<span class="blog" style="clear: both">

This is another piece of test writing

</span>
 
</div>
 
</body>

</html>

Aug 31 '07 #2

gregerly

192

Expert 100+

I think the best way to position to div elements side by side is by the use of a float. The code could look like this:

[HTML]<div id='div1'></div>
<div id='div2'></div>[/HTML]

Expand|Select|Wrap|Line Numbers

#div1{float:left; width:400px;}

This would make div1 400px wide, with div2 placed directly to the side of div1.

Greg

Aug 31 '07 #3

olivermccallion

Yeah, thats what I've tried. In the div.nav, there's the float: left; attribute. But it doesn't seem to be doing anything. What am I doing wrong?
Thankyou!

Aug 31 '07 #4

spacix

but if you just switch to spans (the code I posted tested fine in FF and IE for me) you can allow for auto sizing for people with large resolutions and increased text sizes, tho floating it on top will work too for a fixed position. It only matters on how you want it to look, but the swap to inline span's would be my preference / method...

I can see why you didn't know/find the answer to this with google as what you wanted to do needed diffrent tag.

more info on span:

HTML <span> tag
Definition and Usage

The <span> tag is used to group inline-elements in a document.
Differences Between HTML and XHTML

NONE
Tips and Notes

Tip: Use the <span> tag to group inline-elements to format them with styles

HTML <div> tag
Definition and Usage

The <div> tag defines a division/section in a document.
Differences Between HTML and XHTML

The "align" attribute of the div element was deprecated in HTML 4.01.

The "align" attribute of the div element is not supported in XHTML 1.0 Strict DTD.
Tips and Notes

Note: Browsers usually place a line break before and after the div element.

Tip: Use the <div> tag to group block-elements to format them with styles.

Aug 31 '07 #5

drhowarddrfine

7,435

Expert 4TB

I believe I solved this in your other post. I should merge the two.

Aug 31 '07 #6

olivermccallion

Thankyou very much spacix, I've got it sorted now. Yay :)

Aug 31 '07 #7

Similar topics

horizontal spacing between 2 divs

by: Poonam | last post by:

Hi there. How can i maintain the spacing between to divs if palced side by side with 10px spacing between them.. Not using any tables. And atleast making one of the div relative positioning. ...

HTML / CSS

Preventing side-by-side divs from slipping under each other?

by: Preston Crawford | last post by:

I know this is probably a dumb question so please be patient with me. I've been doing HTML since 1994, but mostly for projects that had to be as completely compatible as possible and mostly...

HTML / CSS

CSS Positioning divs wrt unrelated divs in IE

by: Egon Pasztor | last post by:

Hi. I'm new at CSS, so maybe this is obvious, but I've looked around quite a bit looking for a solution. I'm playing with the vertical positioning of elements in a 2-column layout. The...

HTML / CSS

Making empty divs appear side by side

by: Aaron | last post by:

I have the following divs: <div style="background-image: url(images/house_01.jpg); width: 249px; height: 346px;"></div> <div style="background-image: url(images/house_02.jpg); width: 251px;...

HTML / CSS

centering two divs

by: red | last post by:

How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...

HTML / CSS

div positioning--Am I in a tables mindset? What am I doing wrong?

by: no0bodyhome | last post by:

Why am I having so much trouble positioning divs? Am I in a tables mindset here? Why doesn't content flow below or alongside where it is suppose to? I created the example below to give you...

HTML / CSS

Positioning DIVs within DIVs (need hack)

by: Oddball | last post by:

I have a problem with the positioning of two divisions. They are containined within a content division in which all the page content happens (ie not the menus, etc.). The behavior I would like...

HTML / CSS

Simple question - positioning DIVs to flow properly

by: S | last post by:

Hello I have a (fairly) simple layout, part of which you folks so kindly helped me with already (thank you all). This layout contains: - A header area (100% width across top) - A nav area...

HTML / CSS

Positioning divs in javascript

by: modermo | last post by:

I was having a little think to myself the other day. Could I place javascript inside a div, and then manipulate/ or position the div usin css? Or is it best to position via javascript? I tried...

Javascript

align bottom of divs

by: jhardman | last post by:

I'm almost to the point of using tables to position my elements. That is how bad this is. So here's the rundown. I have an old page (created by someone else) that I was trying to update to...

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

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

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

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

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

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

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

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