Page width / positioning

Get Started
1

Dear all,

Can anyone please kindly take a quick look at my short source code. I am trying to use the container div to fix the page width at 934px, which on my 1280 px laptop should leave margins of 173 px on either side. The first / left margin behaves correctly ie no content in the first 173 px of the page, but there seems to be no boundary on the right hand side of the page. :shifty:

Any suggestions please??

Thank you

Ju

2

Unless you really want to use words a thousand characters long, normal text will flow within the container. Because there are no breaks between those Qs, you’ve got one long word. How is the browser supposed to know where to break it?

3

OK, awesome, thank you :smiley:

How is the browser supposed to know where to break it?

I guess I thought that if the width was fixed at 934 px, the browser would have to break anything extending beyond the 934th pixel. :disagree:

4

Not by default. There are some CSS properties that would help here, but really they are irrelevant here, as there’s nothing wrong with your code in normal circumstances.

By the way, Welcome to SitePoint! :slight_smile:

5

Thanks :smiley:

6

Ok so I want to do two columns, with the Belgium paragraph in the left hand column and the Borneo paragraph in the right hand column - can anyone please tell me why my columns are being ignored? :frowning:

Thank you

7

No blank spaces are allowed in ID or class names. So try this:

#[COLOR="Red"]right-column[/COLOR] {
	float: right;
	width: 640px;
}

Make sure to update the CSS and HTML. :slight_smile:

8

Thanks :blush:
By the way is there any online validator that would have told me this to save me asking dumb questions? :smiley: I did try http://validator.w3.org today but it didn’t point out my mistake.

9

Hmm, surprised the validator didn’t pick that up. Still, it’s always nice to have a second pair of eyes, which is what forums are for. :wink:

10

Thanks to Ralph :smiley: Can you or anyone please help with my latest problems which I think are connected:

  1. In the CSS I tried to apply a background colour to the container div ie the entire page but the colour stops at the slideshow instead of continuing down.

  2. My footer div is meant to be at the, err, foot of the page but instead appears at the bottom of the background colour.

:shifty:

Any suggestions please?

11

I have just realised my above two problems happen in Firefox and Google Chrome but not in IE. :eek:

12

You have two issues here to do with “clearing floats”. A container does not wrap around floated contents by default (except in IE, which gets it wrong). You have to tell it to do so, and there are various ways to do it. If you didn’t have a non-floated footer following your floats, you could apply overflow: hidden to the #container div. However, all you need to do here is apply clear: both to the footer to pull it down below the floated columns.

#footer {
  clear: both;
}
13

OK thanks, that is a bit strange. I just read something about the overuse of floats and am now wondering whether I need to use floats at all to create two columns. Maybe I could just have two divs with the left hand column positioned next to the left side of the page but the right hand div positioned 300px from the left. So I tried this but while the right hand column is behaving correctly, the left hand column will only start at the end of the right hand column, leaving the space above, where I want it to go, as blank. :unhappy:

14

This is a perfect situation for using floats, so stick with them. Using position for placing columns is a bad idea, as they are harder to control. Those columns are behaving just as they should the way you have them now. They naturally sit one atop another. The “right” div has its natural place above the “left” column, and position:relative just moves it 300px to the right while preserving its rightful space.

Trust me: use floats here. The only other real option is position:absolute, but then other page items won’t flow nicely when the columns expand and contract.

15

OK thank you, can I say that an element considers itself to own all the horizontal place on its level except when something is floated from the other side, so having different elements on the same horizontal level is generally going to involve ‘float’?

Trust me

I do. :smiley:

16

Elements are normally classed as “block” or “inline” element. Block level elements (like divs, p, h1 etc) own their own space (horizontal and vertical) unless CSS steps in to visually move them about. There are other ways to sit elements side by side, such as position, css tables, HTML tables etc, but generally floats are the way to go at the moment (until something better comes along).

Inline elements (like images, anchors, spans etc) by default sit side by side.

Whether an image is block or inline by nature, you can change that via CSS. You can dictate that a div is “inline”, or even “inline-block” and a few others as well.

I do. :D[/QUOTE]

Fool! :lol:

17

It might be that you’re making changes, and that’s why I’m seeing it, but the main body of this page doesn’t appear to have the brown background, just the grey.

http://www.juc1.byethost24.com/borneo/fish.html

I poked through the page, and didn’t see any obvious errors. Let us know if you need another set of eyes on that page. :slight_smile:

18

The footer is designed to be inside the #container div, but has somehow slipped out on that page.

19

Thanks for your help. The footer is now inside the container page width but for some reason is on the dark background. :shifty: