Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

CSS div help ?

Started by Allsortgroup , Apr 18 2006 10:11 AM

  • Please log in to reply

#1
Allsortgroup
Posted 18 April 2006 - 10:11 AM

Allsortgroup

    I SPAMMED Too Much!

  • Banned
  • PipPipPip
  • 905 posts
Hi there,

Im really good with css but im stuck with divs.

Im making my new site and its all done with css and divs.

But on my news page i have a news div and then i want coloms inside it (like sub divs) like this...

1.JPG

Abouve has 3 div colums next to each other. Sometimes i want 4.

But it allways seems to do this...

2.JPG

2 divs stay next to each other and then next one shifts down. And theyre widths are ok to all fit in.

Why do they shift down?

Is there anyway to put loads of divs next to each other without them shifting down ?

:whistling: :help: :blink:
  • 0

Advertisements

#2
TaNkZ101
Posted 18 April 2006 - 10:18 AM

TaNkZ101

    Member

  • Member
  • PipPipPip
  • 327 posts
(subscribing to topic; interested in the answer)
  • 0

#3
Ryan
Posted 18 April 2006 - 10:22 AM

Ryan

    Member 4k

  • Member
  • PipPipPipPipPipPipPip
  • 4,867 posts
I don't know the answer either, but there is a way to subscribe without replying.

If you click on the options button near the top of this thread, one of the options is "Track This Topis". Click that, select Immediate Notification, and then click Subscribe.
  • 0

#4
thenotch
Posted 18 April 2006 - 12:13 PM

thenotch

    Member

  • Retired Staff
  • 668 posts
You need to use "floating".

This is very generic, but you should get the idea...

<style type="text/css">
<!--
#column1 {
	float: left;
	width: 253px;
	background-color: #CCCCCC;
}
#column2 {
	float: left;
	width: 253px;
	background-color: #999999;
	margin-left: 10px;
}
#column3 {
	clear: none;
	float: left;
	width: 253px;
	background-color: efefef;
	margin-left: 10px;
}
#wrapper {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
}
-->
</style>
</head>

<body>
<div id="wrapper">News:<br /><div id="column1">Column 1</div>
<div id="column2">Column 2</div>
<div id="column3">Column 3</div></div>
</body>

This sets a wrapper area of 780px centered with 3 boxes and a 10px margin between column 1 & 2 and 2 & 3

Edited by thenotch, 18 April 2006 - 12:21 PM.

  • 0

#5
Allsortgroup
Posted 18 April 2006 - 01:46 PM

Allsortgroup

    I SPAMMED Too Much!

  • Topic Starter
  • Banned
  • PipPipPip
  • 905 posts
Oh, ive had a look through it and i fully understand now.

Ive picked up on my mistakes :blink: .

So say if you have a main box which was 450px wide. There are 5 coloms each 100px wide. If you try and fit them all in 1 line, will it only fir 4 in and the 5th box will be shifted to the next line because it is 100px and there is only 50px left ?

And what is the clear tag ?

Also...

In my <div> tags, when i write like im doing now and press enter

There is a big gap. Is there any css tag that you can like set when you press enter, how many lines it goes down like ill press enter.
So there is no BIG gap between the lines ?

And does anyone know why they are called <div> tags ???

:whistling:
  • 0

#6
Hai Mac
Posted 18 April 2006 - 02:07 PM

Hai Mac

    Member

  • Member
  • PipPipPip
  • 260 posts
Err, from "divide"? :whistling: . I always thought of div like that...

Alternatively, I was to solve your problem, I would use tables, but I suppose you would like it tableless, right?
  • 0

#7
TaNkZ101
Posted 18 April 2006 - 02:33 PM

TaNkZ101

    Member

  • Member
  • PipPipPip
  • 327 posts
u can set the offset of any element in css, go to www.w3schools.com/ and the css part. it's in the positioning chapter i think.
  • 0

#8
thenotch
Posted 18 April 2006 - 07:34 PM

thenotch

    Member

  • Retired Staff
  • 668 posts

Alternatively, I was to solve your problem, I would use tables, but I suppose you would like it tableless, right?


Tables are not designed for layout. CSS is designed for layout.
Tables add unnecessary bloated code, CSS is considerably slimmer and more efficient.

Tables are great if you have tablature data, but are misused for layout.


So say if you have a main box which was 450px wide. There are 5 coloms each 100px wide. If you try and fit them all in 1 line, will it only fir 4 in and the 5th box will be shifted to the next line because it is 100px and there is only 50px left ?


Basically... if you set the width then that is it. You can't squeeze 500px into a 450px box without it line feeding.


And what is the clear tag


Sorry, that was unnecessary to put in there. That clear tag will clear the float; either left, right or all. So if you had another div that you wanted to start fresh on the next area you could tell it to clear: <then one of the choices here>;


In my <div> tags, when i write like im doing now and press enter

There is a big gap. Is there any css tag that you can like set when you press enter, how many lines it goes down like ill press enter.
So there is no BIG gap between the lines ?


Sounds like your editor is inserting that. What are you using? Open up your code with something other than a GUI type editor (Dreamweaver for example) and I bet you will see either one or two <br /> in there or a <p>nbsp;</p>... Remove those and your big gap is gone. I would check your editor.. it's most likely taking enter presses as breaks and inserting the code.
  • 0

#9
Allsortgroup
Posted 19 April 2006 - 10:12 AM

Allsortgroup

    I SPAMMED Too Much!

  • Topic Starter
  • Banned
  • PipPipPip
  • 905 posts

Sounds like your editor is inserting that. What are you using? Open up your code with something other than a GUI type editor (Dreamweaver for example) and I bet you will see either one or two <br /> in there or a <p>nbsp;</p>... Remove those and your big gap is gone. I would check your editor.. it's most likely taking enter presses as breaks and inserting the code.


Yes, thats exactly what it is doing.

Is there anyway to stop it doing this automatically?
  • 0

#10
thenotch
Posted 19 April 2006 - 10:49 AM

thenotch

    Member

  • Retired Staff
  • 668 posts
I have no idea since I don't know what editor you are using....

If you are using Dreamweaver, the default (I believe) is that when you press <enter> it inserts a <p>&nbsp;</p>... <shift><enter> will produce a <br /> which is apparently what you are after...
  • 0

#11
Allsortgroup
Posted 19 April 2006 - 11:00 AM

Allsortgroup

    I SPAMMED Too Much!

  • Topic Starter
  • Banned
  • PipPipPip
  • 905 posts
Ok thanks
  • 0

#12
Allsortgroup
Posted 20 April 2006 - 03:01 PM

Allsortgroup

    I SPAMMED Too Much!

  • Topic Starter
  • Banned
  • PipPipPip
  • 905 posts
Ok, i have another question about css...

You know on your html pages you put all your text in there? And the html file refers to the css document.

On the css document is there any function like <text> then you put some text in like...

#bottom {
width: 200px;
(then something like insert text, then you type some text)
}

Then on your html page, when you insert the div #bottom, it will come up allredy in the div tag with the text that you wrote in the css file?

Is there any way to do this? :whistling:
  • 0
Back to Web Development · Next Unread Topic →




Similar Topics

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP