I have the following layout: nested DIVs, the outer having 100% width and the inner having some fixed width. The inner one is centered using margin:auto.
Now I need to set different backgrounds to the DIVs. Say, the inner should be red and the remaining part of the outer should be green. The problem is that the backgrounds need to be semitransparent (using PNG or CSS3's rgba()). So, the background of the inner DIV does not look red, it becomes brown! Here is my code:
<div id="outer">
<div id="inner"></div>
</div>
and the CSS
#outer{width:100%;height:50px;background:rgba(0,255,0,0.5)}
#inner{width:800px;height:50px;margin:auto;background:rgba(255,0,0,0.5)}
I've tried to use 3 floated DIVs inside the #outer. But I can't set width for the other 2 DIVs to make the #inner to be in the center of the screen. width:auto doesn't work as well.
I know such layout is possible with tables; more precisely with elements that have display:table-cell. So when I add another "outer" DIV, I get the result I need (3 "levels" are required for table-like layout: table, row, cell). CSS:
#outer2{display:table;width:100%}
#outer{height:50px;display:table-row}
#inner{width:800px;height:50px;background:rgba(255,0,0,0.5)}
#left, #right, #inner{display:table-cell}
#left, #right {background:rgba(0,255,0,0.5)}
and the ugly HTML:
<div id="outer2">
<div id="outer">
<div id="left"></div>
<div id="inner"></div>
<div id="right"></div>
</div>
</div>
Is there any other way to put 3 DIVs in a row with such "balance"? Or, maybe, there is a completely different way to solve the original issue? I mean, the problem appeared only because of the transparency! :)
I don't like the solution with display:table, because I've added 3 additional DIVs... Also, please don't suggest any solutions using JS.
If you're feeling edgy and don't mind losing a horizontal scrollbar...
HTML
<section></section>
CSS
body { overflow-x:hidden; }
section {
width:500px;
height:50px;
margin:0 auto;
position:relative;
background:rgba(255,0,0,0.5);
}
section:before, section:after {
top:0;
bottom:0;
content:"";
width:9999px;
position:absolute;
background:rgba(0,255,0,0.5);
}
section:after { left: 100%; }
section:before { right: 100%; }
Demo: http://jsfiddle.net/6STug
Hat-tip, CSS-Tricks
Why don't you use a single background png image on the #outer? The image could contain the semitransparent red then the semitransparent green and again the semitransparent red.
Related
I was wondering if someone could explain to me why this is happening. Sorry I am new to CSS/HTML. I am working on creating and HTML layout for a basic page, currently I have three Divs. I want one container on the left (id= leftside) with 50% width and another on the right (id=rightside) with 50% width and the third container (id=narrow) below both of them at 100% width.
So currently my third div gets hidden underneath the first two unless I add the property 'top: 50%;' to that div. Can someone please explain why this is happening? I thought that since the space is already taken by my other two divs that I would not have to use the 'top' property in order for the third div to display. Why is it being hidden by the other divs?
Here is my HTML code:
<body>
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</body>
Here is my CSS code:
#leftside{
width: 50%;
height: 50%;
background-color: blue;
float:left;
}
#rightside{
width: 50%;
height: 50%;
background-color: red;
float:right;
}
#narrow{
width:100%;
height:20%;
background-color:black;
}
Whenever you do use the float for the element then don't forget to clear them.
For easier I always use overflow:hidden; to the parent div:
<div class="parent">
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</div>
.parent{overflow:hidden;}
So now, you know the key reason of hiding?
Because the first two divs have set floats so they are taken out from the "normal" flow, while the last remains the same and isn't affected by the previous two.
To be affected you can either set float also to the last element, or clear the float.
#narrow {
width:100%;
height:20%;
background-color:black;
clear: both;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats for more info.
I always create a spacer div and use it whenever I need to clear any previous floats or coding. This is specially useful when I have a ton of divs within a parent div.
.spacer {
clear:both;
border:none;
width:100%;
}
*other divs above*
<div class="spacer"> </div>
*other divs below*
I have page that loads data in dynamically. I have put the image on the left and some text on the right. In two column by using float:left;
This works fine but the height of the containing div does not change to match the height of the larger div.
I have soemthing like this:
<div class="container">
<div class="left">//some php to load image</div>
<div class="right">//loaded text</div>
</div>
.container{
width:800px;
height:auto;
}
.left,.right{
float:left;
height:auto;
}
.left{
width:300px;
}
.right{
width:500px;
}
The divs are next to eachother but the containing div only resizes to the height of the smallest div. Shouldn't it resize to the height of the largest div?
Add overflow:auto to the .container element..
I think this is a typical clearfix problem.
Read here about clearfix: What is a clearfix?
I have the following div structure below:
<div class="Large-Centered-Div">
<div class="Left-Div">
<div class="Inner-Left-Div">
</div>
<div class="Inner-Center-Div">
</div>
<div class="Inner-Right-Div">
</div>
</div>
<div class="Center-Div">
(Small Image/Etc. Would Go Here)
</div>
<div class="Right-Div">
<div class="Inner-Left-Div">
</div>
<div class="Inner-Center-Div">
</div>
<div class="Inner-Right-Div">
</div>
</div>
What I am looking to do is a bit complicated, but hopefully this all makes sense:
Have the "Large-Centered-Div" expand the entire width of the page and within the "Large-Centered-Div" have the "Left-Div", "Center-Div", and "Right-Div" set up so that the "Center-Div" is small and the "Left-Div" and "Right-Div" be large such that the "Center-Div" is small in width but in the middle.
Within both the "Left-Div" and "Right-Div" I would like the "Inner-Center-Div" to take up the majority of the space and only have the "Inner-Left-Div" and "Inner-Right-Div" take up enough space to show an image for their respective edges. In addition, I would like the "Inner-Center-Div" to be fluid with the width size.
With these things in mind, I have achieved the first goal on my list but not the second. Here is the code for the first item:
.Large-Centered-Div {
position:relative;
left:0px;
right:0px;
}
.Left-Div {
float:left;
vertical-align:middle;
width:47%;
}
.Center-Div {
float:left;
width:6%;
text-align:center;
}
.Right-Div {
float:left;
vertical-align:middle;
width:47%;
}
The question is, how do I achieve #2? Is this possible?
Thanks.
Try making the inner left and inner right div auto for the image and making the inter center div a certain percentage.
What I would do is hard code the width of the image. let's call it w pixels. So:
.Inner-Left-Div, .Inner-Right-Div { width: wpx; }
Then the inner center div will expand to fill the rest of the space.
What I would do is make the div's width a function of percent, that way, they will always be the same relative to each other, and they will resize perfectly.
.Large-Centered-Div{
width: 100%;
}
.Left-Div, .Right-Div, .Inner-Left-Div, .Inner-Right-Div{
width: 40%;
}
.Center-Div, .Inner-Center-Div{
width:20%;
}
This is by far the fastest and most DRY way of accomplishing this.
also, for convention's sake, it would be better to leave your class names lowercase. It's easier to remember your conventions if you simplify them, good luck!
-Brian
how to implement border-image for old browsers?
I have 8 images:
4 border images (border-top.gif, border-right.gif, border-bottom.gif, border-right.gif)
and 4 border conners (outer part of conners is transparent, it is important) : border-top-left.gif, border-top-right.gif, border-bottom-right.gif, border-bottom-left.gif, also I have next markup:
<div class"block">
<div class="content">A lot of text with images and tables</div>
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>
<div class="border-top-left"></div>
<div class="border-top-right"></div>
<div class="border-bottom-right"></div>
<div class="border-bottom-left"></div>
</div>
any CSS solutions? if it is need I can add classes to markup.
UPD: I know that is easy do with table, but I want find solution for divs.
UPD2: images with gradient, so there is no way to do it without images.
relative positioning of your container ( .block )
absolute positioning of your corner div elements inside the container.
<style type="text/css">
.block { display:block;position:relative; }
.border-top-left {
display:block;
background-image:url(/folder/topleftcorner.png);
background-repeat:no-repeat;
width:10px; height:10px; /* size of your corner graphic above */
/* this puts it where you want it */
position:absolute;
top:0;
left:0;
}
</style>
Use from ...
right:0; bottom:0
to match up the rest to suit
I suggest using CSS sprites. This way you don't have to waste time slicing up images. Allow the CSS background-position declaration do the work for you.
See: http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
This is what I am trying to do :
HTML
<div class="container">
<div id="one" class="child">One</div>
<div id="two" class="child">Two</div>
<div id="three" class="child">Three</div>
<div id="four" class="child">Four</div>
</div>
CSS
<style type="text/css">
.container{
height:40px;
width:500px;
}
.class{
float:left;
/*...*/
}
</style>
The child divs should fill the container div how big or small it has its width. They can get big according to the container automatically.
|<---One----><---Two---><-Three-><--Four-->|
How can I do it with css?
Thanks in advance.
I've set up a test site to make sure this works:
First, you'll need to keep float to "left" to keep everything on the same row. Next, set width to "25%", to space out the elements. Finally, set text-align to "center" to center the elements, as in your diagram. Remember, if you change the number of elements, you'll need to modify the "25%" to a value that evenly spaces out the elements. (Use 100 / numElements).
.child {
float: left;
width: 25%;
text-align: center;
}
Does anyone know a way to do this without using width percentages, so that it will auto-spread the elements if they are removed or added?
You can set the .child width to 25%, like this:
.child { width 25%; }
You can test it out/play with it here.
Total width is 500 so each child div should be 125px wide. You got the right idea using the float:left;
The solutions that have been given to you are correct. Just be careful if you have margins/borders/paddings in the inner divs, because in that case the 25% would break the layout (margin, borders and paddings are not included in the percentage).