Minor div alignment issue

Hi all,

I am a third level multimedia student and was just wondering what the best/easiest way to have 2 divs beside each other in a page with no wrappng. e.g. a content and a nav div.

I know the simple answer is to use float but I cannot get it to fit correctly. I want my nav on the right and content on the left.

Thanks for your time,
Ian

Dec 2 '06 #1

Subscribe Post Reply

1691

mtnative

DIV alignment can be a bit tricky. By default a DIV tag includes a line break so you would have to use float to line them up horizontally.

I'm not sure what you mean when you say "I can not get it to fit correctly." Can you offer some more specific detail about the problem you are having?

Dec 3 '06 #2

AricC

1,892

Expert 1GB

Not really clear is this what your trying to do?

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Test
</title>

<style type="text/css">
body
{
background-color: #000;
}

.clsBox1
{
width: 75px;
height: 75px;
background-color: #fff;
position: absolute;
text-align: center;
}
.clsBox2
{
left: 100px;
width: 75px;
height: 75px;
background-color: #fff;
position: relative;
text-align: center;
}

</style>

</head>

<body>

<div class="clsBox1">
Test
</div>

<div class="clsBox2">
Test
</div>

</body>

</html>[/html]

Dec 3 '06 #3

AdventSparky

Upon re-reading my post I realise I wasn't very specific.

I am attempting to use float to do it. I have them side by side but once my content div finishes My #nav wraps around and places material under my #content.

It will only be a problem on the front page because the #content is small (just for a login arera) so #nav has room to wrap underneath.

I just need to learn how to stop the wrapping without having to give my content a fixed size.

Dec 3 '06 #4

mtnative

I was able to reproduce the circumstance you described. I had two DIV's lined up horizontally with the DIV on the right containing more content than the DIV on the left. Neither had a HEIGHT: definition and both had a WIDTH: definition.

When I removed the WIDTH: definintion from the STYLE= statement (I was using an inline style statement) on the right hand DIV, its contents wrapped around the bottom of the left hand DIV.

So, it appears that you must specify a WIDTH: for the right hand DIV in order to prevent the contents from wrapping.

Give it a try and see if this solves your issue.

Dec 3 '06 #5

AricC

1,892

Expert 1GB

If mtnative's solution doesn't help post your code and a link to the site so we can see what is going on.

Dec 3 '06 #6

AdventSparky

Yep all fixed. Thanks everyone.

Dec 4 '06 #7

Similar topics

Questions about "alignment" in memory

by: J. Campbell | last post by:

I posted a question some time back about accessing a char array as an array of words. In order not to overrun the char array, I padded it with enough 0x00 bytes to ensure that when accessed as...

C / C++

struct and union alignment

by: S.Tobias | last post by:

I would like to check if I understand the following excerpt correctly: 6.2.5#26 (Types): All pointers to structure types shall have the same representation and alignment requirements as each...

C / C++

Class Data Alignment Problem in v 7.1

by: sgraber | last post by:

I have encountered a class data alignment issue in Microsoft Visual Studio .Net 2003 (C++, 7.1). The issue only appears in certain configurations. My class is a simple class with no inheritance....

.NET Framework

Any other workarounds for the totally screwball right-alignment on datagrid?

by: Earl | last post by:

Any known fixes for the wacky right-alignment bug in the WinForms datagrid (VS2003)? I've tried Ken's workaround...

Visual Basic .NET

pointer alignment property

by: aegis | last post by:

The following was mentioned by Eric Sosman from http://groups.google.com/group/comp.lang.c/msg/b696b28f59b9dac4?dmode=source "The alignment requirement for any type T must be a divisor of...

C / C++

Image Alignment Issue

by: Cardman | last post by:

I am hopeful that someone can quickly solve my image alignment issue when things are just not going right and where my attempts to solve this alignment issue have all failed. First of all take a...

HTML / CSS

alignment/zero length arrays

by: Bill Pursell | last post by:

I have a program that does most of its work traversing a bunch of lists. The lists contain a void *, and I spent some time today replacing the void *'s with a copy of the data at the end of the...

C / C++

'Portable' Measurement of Pointer Alignment in C?

by: Brian Gladman | last post by:

A lot of low level cryptographic code and some hardware cryptographic accelerators either fail completely or perform very poorly if their input, output and/or key storage areas in memory are not...

C / C++

standard memory allocator alignment issue...

by: Chris Thomasson | last post by:

How many C compilers provide extensions which allow for a standard implementation of the following hack? ____________________________________________________________________ #include <stdio.h> ...

C / C++

Re: Alignment issues -- are they an issue?

by: =?ISO-8859-1?Q?Tom=E1s_=D3_h=C9ilidhe?= | last post by:

On Sep 22, 10:45 am, Nick Keighley <nick_keighley_nos...@hotmail.com> wrote: Only problem is that then entire frame in memory might have strange alignment.

C / C++

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

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

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

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

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

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