Divs to go to the end of the container

HTML & CSS
1

hello!

how can i do that 5 of my divs go to the end of the container ?

the paln

1680×1050 210 KB

the code

thanks galia

2

After <div id="tab"> just put your next div there and code. It’ll appear after your gray box in your example, and above the red boxes.

3

hello!

but i have no space up on my ‘red’ divs

thanks galia

4

I’m sorry, I do not understand your answer. Did you try what I suggested?

5

hello!

i meant to put the div there(see image) when there is not yet space to put the new div i try that it didn’t work it became to a mess

1680×1050 218 KB

thanks galia

6

1st off, don’t use tables for layout. Your menu is not tabular data , so style it with CSS. :smile:
2nd. DONT use: position:absolute on your main design. It takes things thing out of the regular flow,
3rd Use a container (you are actually already doing this, but I am mentioning it for good measure.

if you follow these 3 rules your container height ( see #3) will always be the sum of the height of all it’s children (in other words divs will appear to go to the end of the container)

7

hello!

first thanks for the advice but on this page apart of the names of the pages that i used in tabular data the all my five elements are divs and they what i want to go down and i don’t use anything with position:absolute only in relative did you have a solution?

thanks galia

8

@RyanReese gave you the answer in post #2; you simply insert the code for the new div where you want it to appear - after the closing tag of div id="tab". If there is not enough room for it, then you will have to increase the height of #container.

9

Which you should just remove the heights of everything. You are trying to lay everything out like it’s a piece of paper. That’s not going to work.

1 Like
10

hello!
i have to draw the div first or put the code in the code menu?

thanks galia

11
Off Topic:

what does “galia” mean

12

hello!
i meant in dreamweaver in the design menu do i have to first draw the div or just on the code menu to write the code ?

galia

13
  1. I don’t use Dreamweaver, and we all keep telling you to ignore Dreamweaver’s “design” view. Just go to the code and add the div tags and content. Then you can style it in the CSS.
  2. As I keep saying, if you’re not sure about something, make a back-up copy of your file, and then try it for yourself. It’s quicker than waiting 11 hours for me to confirm what I meant, and you’ll learn a lot more, and remember it better, by doing it yourself.
14

hello!
first of all i do not meant how the design view look when i put the div i meant when you put div on dreamwver you first draw the div in the design view and i was ask if i have to just write on the code view
but i try what you tell me to do i think it is good but i am not sure i am sending the code

http://jsfiddle.net/rt0hpx1q/

and by the way what softwere do you use?

thanks galia

15

Yes, that’s what I’m trying to tell you. Forget about doing anything in design view and just add the code in code view.

[quote=“nono29, post:14, topic:99957”]
but i try what you tell me to do i think it is good but i am not sure i am sending the code
[/quote]You’ve added the <div> tags in the correct place. I can’t say more than that, as you have not yet added any content or styling.

(There is really no need to send an entire JSFiddle when you just want to check a couple of lines of code, as in this case. In any case, I would find it easier if you would just post your code here. Your JSFiddles do not display the results well, and I have to copy and paste the code into a file to view it.)

[quote=“nono29, post:14, topic:99957”]
what softwere do you use?
[/quote]I use Bluefish on Linux. (It’s also available for Windows and Mac.)

16

hello!
is this the content/styling that you meant ?
and there’s something more that i have to do??

    #upper{
	width: 960px;
	height: 106px;
	position: relative;
	background-image: url(images/html-images/canstockphoto1781675600_comp.jpg);
	background-repeat: repeat;
	border-bottom-width: medium;
	border-bottom-style: outset;
	border-bottom-color: #000;
}

thanks galia

17

[quote=“nono29, post:16, topic:99957”]
is this the content/styling that you meant ?
[/quote]Content is what goes into the div - the text, images or whatever the div is designed to hold. At the moment, your div is empty.
<div id="CHANGEME"></div>

As I said in your previous topic:

[quote=“nono29, post:16, topic:99957”]
and there’s something more that i have to do??
[/quote]If you want the styles you’ quoted in your post above to apply to the new div you inserted, then yes - there’s something else you need to do. You need to correct a mistake in your coding. Look at the code for the div, and the code for your styles and work it out - it isn’t difficult.

18

hello!

that what i did is it good?
and did i have to do something with the container?

 <div id="upper"></div>
#upper{
width: 960px;
height: 103px;
position: relative;
background-image: url(images/html-images/canstockphoto1781675600_comp.jpg);
background-repeat: repeat;
border-bottom-width: medium;
border-bottom-style: double;
border-bottom-color: #000;

}
the image

1680×1050 252 KB

and i have a questionHow can I add heigh to the three(appdev1 /, apdiv6, div7) but from above if possible?

thanks galia

19

Do you still have #container set to a height of 1200px?

If so, delete that height property because no height is required. You will then be able to add as much height above it as you wish.

20

hello!
i did what you say to try but look how it look now not good and if i add more hight it is still from down the div

1680×1050 247 KB

galia