CSS questions

[Modo]

Hello guys, how are you doing?
I have a couple of questions please, I would appreciate any help.

1- I have three "relative <div>" I want to put them next to each other and making sure if someone has less resolution, there wont be a scroll bar. But instead the <div> will adjust and the text will go below.

I made sure all three have the following attributes:
position: relative;
float: left;

But the problem is that each one of these div's has a width according to the text in it, which means they are next to each other. I also added a <div> to wrap all three <div> it didnt work.
I tried giving them a width of 33% each and one 34% but one of them jumps down whenever I resize my browser.
here is my code:

.bassano1	{	width: 33%; }
.bassano2	{	width: 33%; }
.bassano3	{	width: 33%; }
.bassano1, .bassano2, .bassano3, .bassano4, .bassano5
{
position: relative;
background-color: #008001;
border: 2px solid #095E09;
float: left;
height: 50 %;
}

I tried making the height the same, but it didnt work either.

2- How can I center a table or an image in a <div>?

Thanks in advance

[blocblue]

Hey,

I notice that you apply 2px borders to the divs. With the box model, borders are added to the width of the container.

You therefore have 99% width across the three divs, + 12px for the borders (left and right).

I'd suggest making the widths something lower, e.g. 32% + a border.

And to centre an image within a div, I believe if you use text-align: center on the div, it should centre the image itself.

R.

[Modo]

thanks for the reply ...
as for the images i tried using center align but it didnt work for the img .. i use center align for img in css and not for the whole div since it contains soms text.

and i will do what u told me but there is a problem of div jumping down if i dont use the width and put some value into it.

any idea's ?

[almostbob]

.bassano1 { width: 33%; }
.bassano2 { width: 33%; }
.bassano3 { width: 33%; }
.bassano1, .bassano2, .bassano3, .bassano4, .bassano5
{ position: relative;
background-color: #008001;
border: 2px solid #095E09;
float: left;
height: 50 %; }

the css is buggy, the space between '50' & '%' makes a second parameter, not sure how much rendering difference it will make or what quirks it will throw at which browser height: 50%; and retry,

[ccube921]

The problem seems to be your borders, without the borders everything was ok, but the borders didn't fit on the screen, when I set the divs to 32%, it went back.

About the text you complained wouldn't stay in the div, is it in a <P> or is it straight in the div? (it should be in a p) .

Concerning that p, did you set a font size for it?

To center objects, you can try using: margin: 0 auto; But, that will only work if you set a height for the centered object, for example: height: 100%

[Modo]

Thanks for the reply

1- The text is indeed in a <p>, I did not set a font-size I just made the position relative. But the body has a font-size of 12px.

2- I tried centering using the margin but it didnt work.
3- I am also trying to make the heights of each div the same
but I dont seem to succeed in it. But the main problem is the divs for now. I have always used absolute positioning and relative positioning isnt my thing.

[MidiMagic]

Several points:

Height can't see the browser window size in most browsers.

Most browsers correctly put the surrounding styles (margin, border, padding) OUTSIDE the size styles (width, height). Internet Explorer crams them INSIDE instead. The cure for this is to not use nonzero surrounding styles with size styles in the same style or tag.

Center text reliably using the following code:
In the stylesheet, place:

.cenx {text-align: center;}

Then, where you want to place the centered text, put this code:

<p class="bxfix cenx">Your Text to be Centered</p>

The p tag may be replaced by one of the h tags.

Center images reliably using the following code:
In the stylesheet, place:

.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}

Then, where you want to place the centered image, put this code:

<div class="bxfix cenx">
  <img src="yourimag.jpg" alt="description" class="ceni" />
</div>

There must be room for the image, or it won't work.

Center other objects reliably using the following code:
In the stylesheet, place:

.cenx {text-align: center;}
.ceni {clear: both;}
.bxcen {margin-left: auto; margin-right: auto; border: none; padding: 0;}

Then, where you want to place the centered object, put this code:

<div class="bxcen cenx">
  <tag>Your object</tag>
</div>

Put the name of the tag for the object you have instead of the word "tag".

[Modo]

I think I get the point ..
but my main problem is now the following:
- The table is the only thing which is not getting centered
- The div's next to each other dont have the same height
- The border of the wrapper is not really adjusting automatically

any idea's ?

[MidiMagic]

Divs next to each other never have the same height. They each expand downward just enough to hold their contents.

One way to force the height issue is to use the display style on div:

div {display: table-cell;}