Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

CSS div help ?


  • Please log in to reply

#1
Allsortgroup

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

TaNkZ101

    Member

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

#3
Ryan

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

thenotch

    Member

  • Retired Staff
  • 667 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

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

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

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

thenotch

    Member

  • Retired Staff
  • 667 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

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

thenotch

    Member

  • Retired Staff
  • 667 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

Allsortgroup

    I SPAMMED Too Much!

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

#12
Allsortgroup

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






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP