PDA

View Full Version : using DIV's as background



blackwolf
Oct 24th, 2008, 05:01 PM
I currently use DIVs on my site to place text within its own background and the CSS and HTML looks like this

#left {
height:auto;
font-size:12px;
float: left;
width: 15%;
background-color:#9BD2F1;
color:#000000;

}
#right {
height:auto;
font-size:16px;
font-weight:bold
float: right;
width: 85%;
background-color: black;
color:#9BD2F1;
}
#container {
width:80.5%;
padding: 3px;
background-color:#9bd2f1;
overflow: hidden;
}
<div id="container">
<div id="left">Text Here</div>
<div id="right">Text here</div>
</div> The "Container" DIV gives me a perfect rectangle. Is there a way of doing this so the corners are rounded?

Also, if the "right" DIV contains a lot more text than the "left" DIV, how can I get both heights to adjust together so I dont have two boxes at different heights?

abduraooft
Oct 24th, 2008, 05:12 PM
Check the Nifty Corners (http://www.html.it/articoli/nifty/index.html)

Also, if the "right" DIV contains a lot more text than the "left" DIV, how can I get both heights to adjust together so I dont have two boxes at different heights?
by faux-columns (http://www.alistapart.com/articles/fauxcolumns/)

blackwolf
Oct 24th, 2008, 05:26 PM
I dont get it, I've tried to put that in and it doesn't work.
I want a box shape 150px wide and 200px high. I want the border color to be #9bd2f1 and the main area to be #808080.

abduraooft
Oct 24th, 2008, 05:34 PM
Try http://www.roundedcornr.com/ then.

blackwolf
Oct 24th, 2008, 07:06 PM
I need to get 3 small boxes next to each other but when I put the DIVs on the page, they are huge and they are below each other.

abduraooft
Oct 25th, 2008, 08:52 AM
You'd need to apply floats to place more than one block level (http://en.wikipedia.org/wiki/HTML_element#General_block_elements) element in same line

#wrap{
border:1px solid red;
}

#wrap div{
float:left;
height:100px;
width:30&#37;;
}


<div id="wrap">
<div>A</div>
<div>B</div>
<div>C</div>
</div>

vaynenick
Jun 14th, 2014, 10:48 AM
div {
border:5px solid #4FFFA1;
padding:30px;
background:#F6FFA1;
width:250px;
border-radius:25px;
}
Source: CSS rounded corners box (http://www.corelangs.com/css/box/round.html)

vayne