DIV left and right borders only?

[davelev]

Hi,

I am trying to set left and right borders to my DIV. No upper and no bottom border... they are already images, placed.

How to make only left and only right borders without any images?

Currently I am using background images Slower load is the problem!

[HTMLBasicTutor]

The CSS border properties allow you to specify the style and color of an element's border.

CSS Border - w3schools

[moutsos]

You should use

border-left:...
border-right:...

[davelev]

In fact, I already tried that, but for some reason, it didn't work with border left and border right...

Will be back after some experimentation. I thought I was making a mistake, that's why I asked.

So, prolly it just did not propagate for some reason

[davelev]

This is what I have and the left and right borders don't show up at all:

 			} #experiment{
			width: 300px;
			height: 15px;
			border-left-color: #003399;
			border-right-color: #003399;
			text-indent: 0px;
			background-color: #88FFA6;
			float: left;

What could the problem be?

[moutsos]

Try this

 #experiment{
width: 300px;
height: 15px;
border-left:1px solid #003399;
border-right:1px solid #003399;
text-indent: 0px;
background-color: #88FFA6;
float: left;
}

[davelev]

Thanks!
But what was my mistake?

The reason why I kept the {} in the form presented was the fact that I had CSS instructions before and after as well.

Thank you!

[davelev]

I guess I forgot to use "solid"

My next problem is that these left and right borders aren't going all the way down with the DIV. I wrote some content in it and they don't go down... Like they are not high enough.

Didn't specifiy their height, so what can I do now?
Would like to set the height to follow automatically as I enter content.

I have this CSS:

} #advertisements {
width: 268px;
border-left:1px solid #000000;
border-right:1px solid #000000;
background-color: #666666;
font-family: arial;
text-indent: 0px;
font-size: 5px;
color: #000000;

Tried height "auto" and "100 %", but the lines still remain short, "stuck"...

[moutsos]

Set margin to zero and check the results.

[davelev]

Makes no sense, it was normal before, it was zero before.

Solved with a trick... I placed a <BR> and it filled

Seems like the DIV did not fill, not even background was filling, because there was a left-aligned image and the text near it didn't go all the way down near that image. Seems like DIVs need the text to "go down on them" (meaning: text should fill the DIV height). And then they (the DIVs) stretch all the way down!

[kos]

my two cents:

if you have an element that contains other floating elements then the those elements will overlap the parent element; to fix that you should set: overflow: hidden; min-height: 0; so the parent will adjust its width and height accordingly to its content. at least this is what I do and it never fails and also saves me from a lot of headaches...