aligning with CSS

Gernot Frisch · Mar 16, 2006

No clue.
- I want to align the red, green, blue boxes in one line
- red,green,blue must be 45px high
- red (center) must be as wide as possible
- yellow must start exactly below the line
- yellow must be left aligned with red one.

Please, please help!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
<html>
<head>
<style>

/* MAIN AREA*/
.X1{
display:inline;
background-color: green;
margin-left: 32px;
width: 12px;
height: 45px;
}

.X2{
display:inline;
background-color: red;
width: 90%;
height: 45px;
}

.X3{
display:inline;
background-color: blue;
width: 12px;
height: 45px;
}
.Y2{
width:90%;
background-color: yellow;
margin-top: 45px;
margin-left: 44px;
}

</style>
</head>
<body>

<div class="X1"> </div>
<div class="X2">Header</div>
<div class="X3"> </div>
<div class="Y2">Her is some long text</div>

</body></html>

Neredbojias · Mar 16, 2006

With neither quill nor qualm, Gernot Frisch quothed:

No clue.
- I want to align the red, green, blue boxes in one line
- red,green,blue must be 45px high
- red (center) must be as wide as possible
- yellow must start exactly below the line
- yellow must be left aligned with red one.

Please, please help!

Use a div, background:red; float inner sized red div left, blue right.

Another div below, yellow background, body-background inner divs similar
to above.

In some browsers divs may not show unless they have content.

Gernot Frisch · Mar 16, 2006

Use a div, background:red; float inner sized red div left, blue
right.

Another div below, yellow background, body-background inner divs
similar
to above.

I'm totally new to css/html and I don't understand everything you
said. Can you give an example?

Good Man · Mar 16, 2006

I'm totally new to css/html and I don't understand everything you
said. Can you give an example?

i hate to come in sounding snarky, but have you considered buying a book or
doing some online tutorials? The best way to learn is by figuring things
out. Nobody is going to do your work for you.

dorayme · Mar 17, 2006

Good Man said:
i hate to come in sounding snarky, but have you considered buying a book or
doing some online tutorials? The best way to learn is by figuring things
out. Nobody is going to do your work for you.

Well, I dunno, you could say something like this to be nicer:

Please, please help!

/* MAIN AREA*/
.X1{
display:inline;
background-color: green;
margin-left: 32px;
width: 12px;
height: 45px;
}

.X2{
display:inline;
background-color: red;
width: 90%;
height: 45px;
}

.X3{
display:inline;

You can't do it this way. Ask yourself what the 90% width of the
X2 class could be a percentage of?

Look at a series of blocks and css to get as close to what you
want as possible: here is a little rough unfinished start, ask
about how to improve it or revise it so it actually does what you
want as long as it is a sensible thing to want... I give a simple
fixed width container example, that looks closest to what you
want. Fluid layouts are trickier but much more worthwhile in the
end. Have a go with different widths, auto or percentages.

http://dorayme.150m.com/test/alignWithCss.html

Post the results of your efforts in a URL and try not to use a
miserable lowdown cheapskate free host like me...

Mr. Flavell is going to help you, but he needs to see you try
harder. He is like that. Stern and Scottish, you see...

Trouble with css	4	Mar 20, 2020
HTML Aligning social media icons	2	Dec 6, 2020
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Positioning CSS components	1	Nov 16, 2023
Stuck with html and css	25	Dec 14, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021

aligning with CSS

Gernot Frisch

Neredbojias

Gernot Frisch

Good Man

dorayme

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads