Menu
I have a div in my html page which holds 3 radio buttons:
<html>
<head>
<link href="CSS/mystyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="outside">
<div id="inside">
<input type="radio"> apple
<input type="radio"> orange
<input type="radio"> banana
</div>
<div id="others"></div>
</div>
</body>
</html>
My CSS is located under CSS directory,
CSS/mystyle.css:
#inside{
font-size:12px;
border-color:#ff3366;
width: 300px;
height: 50px;
}
The width, height and font-size are set successfully, but the border-color:#ff3366; does not shows, why? Why I am failed to set the border color for the div ?
-------------------- MORE ---------------------
By the way, how to locate my inner div (with id="inside") to the right hand side of the outside div, with about 100px margin to the right most border of outside div?
578
If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
You need to set a border-style. Live example: http://jsfiddle.net/tw16/qRMuQ/
border-color:#ff3366;
border-width: 1px; /* this allows you to adjust the thickness */
border-style: solid;
This can also be written in the shorthand:
border: 1px solid #ff3366;
UPDATE: To move #inside to the right you need to float:right then add a margin-right: 100px. Live example: http://jsfiddle.net/tw16/qRMuQ/
#outside{
overflow:auto;
}
#inside{
font-size:12px;
border-color:#ff3366;
border-width: 1px;
border-style: solid;
width: 300px;
height: 50px;
float: right; /* this will move it to the right */
margin-right: 100px; /* this applies the 100px margin from the right */
}
The color was set fine, you just never actually added a border. Try using this:
#inside{
font-size:12px;
border-color:#ff3366;
border-style: solid;
border-width: 3px;
width: 300px;
height: 50px;
}
As to your updated question, make it float:right and margin-right:100px. The only caveat is, you need to add an extra div after #other with just clear:both to clear the floated div.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
