Hi,
I want to create my own select box using css3 styles. I am using 1 input field and a down arrow for that.Total select box is in 1 outer div and image is in inner tag .I have to position that down arrow to right most to outer div so that it looks like select box.I am facing problem in aligning that image. I can position that tag by putting position:absolute for inner and outer tag both..If I dont put position:absolute to Outer div tag, the inner div tag is not positioned properly..(I dont know..why?).
But the problem is, if I put that, I must specify left and top for every select box(align manually).Its tough to do that if I have more that one select box in my application form.(In fact, its disgusting...)..So the inner div tag must be aligned right most to outer tag without positioning outer div tag....I hope I m clear... Please help out from this issue..
Here is my sample piece of code....
<!DOCTYPE HTML>
<html>
<head>
<style>
#Outer{ width:155px; height:20px; *position:absolute; border:1px solid #336633; }
#In{ position:absolute; right:0px; height:100%; width:10px; background:red; top:0px; }
</style>
</head>
<body>
<div id="Outer">
<input type="text"/>
<div id="In">^</div>
</div>
</body>
</html>
The following code serves your purpose, I think.
<head>
<style>
#Outer{
float:left;
width:200px;
height:20px;
border:1px solid #336633;
}
#In{
float:left;
height:100%;
width:10px;
background:red;
}
</style>
</head>
<body>
<div id="Outer">
<div style="float:left"><input type="text"/></div>
<div id="In">^</div>
</div>
</body>
In the above code, I have added a div for your input element and add float style in both Outer and Inner div. Another thing, your width should be more than 155px, i use it as 200px.
Please let me know whether it works or do you want anything else.
Related
I use center tag, but it seems that is not standard in HTML 5. I tried to use CSS instead but it doesn't work for me! I expect in this example the div tag be displayed in center but it won't.
<!doctype html>
<html>
<body style="text-align:center">
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</body>
</html>
And this is center tag version: (it works)
<!doctype html>
<html>
<body>
<center>
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</center>
</body>
</html>
You can use margin: auto for your div
div {
margin: auto;
width:100px;
height:30px;
background-color:rgb(0,0,0)
}
Also it's better to give your div an id or class name to target it more accurately if your HTML markup become more complex as well as using external CSS instead of inline styles like what you're doing now.
Fiddle Demo
You can use css:
.window{
position:absolute;
top:50%;
left:50%;
margin-top:-140px;
margin-left:-200px;
width:400px;
height:280px;
}
make sure you substract half of the width and height using margins. This way your div will be centered within the window the div is in.
The div tag which you want to put in center in your body must be :
.div-class {
margin: auto;
}
If you use margin top or bottom, you can do this way:
.div-class {
margin-left: auto;
margin-right: auto;
}
So basically I want a side bar and a navigation bar. But when I set the div2 (the side bar) top margin to 110px it moves div1 down with it. Please help me.
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Home.css">
<title>Home</title>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
And the CSS...
body {
background-color:#CCC;
}
#div1 {
width:auto;
height:100px;
background-color:gray;
border-radius:10px;
}
#div2 {
width: 150px;
height: 500px;
background-color: grey;
border-radius: 10px;
margin-top:110px;
}
http://jsfiddle.net/shane__kerr/5p8Qr/2/
Fiddle
Now i did a float:left and width:100% to div1 and clear:both to div2.
Dont forget to add clear:both to any div inside the div1
Change the height in #div1 to auto and set margin-top:100px in #div1, not #div2.
When you add a margin-top to div2, the webpage also creates the other elements to 'trap' that element on its position. To fix this you should use display: inline-block; this way all not given margin is gone.
Why not use float?
Well basically float also sets the display to inline-block but will also position the element. With display-inline only the given margin will be used, without reposition it.
jsFiddle
I thinks your CSS looks good. But I think div 1 and 2 should not be inside each other to achieve what you want.
Try this:
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
Demo here
I have a two columns layout, two of them have a 100% height. So far so good.
The issue rises when the left column (example below) content expands as a result of
a drop down menu.
Take a look at the markup below. I intentionally set another div inside the left one
to illustrate the right box is not expanding according to the left one.
<!doctype html>
<html style="min-height:100%;height:100%">
<head>
<title>test</title>
</head>
<body style="min-height:100%;margin:0;background-color:#ccc;height:100%">
<div style="width:30%;background-color:green;;float:left;min-height:100%"><div style="height:900px">Green</div></div>
<div style="width:60%;background-color:red;float:right;min-height:100%">Red</div>
</body>
</html>
What will be a good solution to get the right box to expand in height; whenever
the left one does?
LIke this
demo
css
html,body{
height:100%;
}
.container{
display:table;
background-color:#ccc;
width:100%;
height:100%;
}
.green{
display:table-cell;
background-color:green;
width:50%;
}
.red{
display:table-cell;
background-color:red;
width:50%;
}
html
<div class="container">
<div class="green">green</div>
<div class="red">red</div>
</div>
OR
Help Full Links for you.
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
I have the following code and would like the inner div with the class: escaping-container to be displayed in front of the outer div with the class container.
The inner div has bigger height setting than the outer div. So a part of it is cut off.
Also the part that is being cut of by outer div must be displayed.
<style type="text/css">
div.container{
width: 100px;
height:100px;
overflow-x:scroll;
overflow-y:hidden;
position:relative;
z-index:1;
}
div.escaping-container{
width:50px;
height:150px;
position:relative;
z-index:10;
background-color:red;
}
</style>
<div class ="container">
<div class="escaping-container"></div>
</div>
I tried to get this done by setting the z-index, but it doesn't work. Any help will be appreciated.
Im afraid your question is a contradiction. If you want the inner div to be visible, you must remove the overflow-x and overflow-y css statements.
if the overflow settings are necessary
try this http://jsfiddle.net/sandeep/59nGZ/
css:
div.container{
width: 100px;
height:100px;
overflow-x:scroll;
overflow-y:hidden;
border:1px solid red;
}
div.escaping-container{
width:50px;
height:150px;
position:absolute;
background-color:red;
}
You won't be able to position the inner <div> outside the parent with overflow set to scroll, hidden or auto. To be able to do so you either need to change your markup, or remove the overflow-properties from your CSS.
Does anyone know why I don't get a top-margin in the first div based on the CSS below? This renders the same in Chrome, Safari and Firefox 4 running on Mac OSX Lion (rendered the same in Snow Leopard). I would expect the first item to display with a 5px margin all the way around the inner div (except for the bottom obviously) and not just on the right and left. Why would the margin not also be applied to the top? Even if I specify margin-top:5px in the CSS it still doesn't render as I would expect.
<!DOCTYPE html>
<html>
<head>
<style>
.outer{
background-color:red;
width:100px;
height:100px;
margin-bottom:20px;
}
.inner{
background-color:white;
margin:5px;
}
.shim{
height:1px;
}
.outer2{
background-color:red;
width:100px;
height:100px;
margin-bottom:20px;
padding:5px;
}
.inner2{
background-color:white;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Margin
</div>
</div>
<div class="outer">
<div class="shim"></div>
<div class="inner">
Margin+Shim
</div>
</div>
<div class="outer2">
<div class="inner2">
Padding
</div>
</div>
</body>
</html>
You're running into a common problem called "collapsing margins." Basically, whenever vertical margins touch (even when one element is inside another element), the margins collapse.
In this case your margin property on the inner div is collapsing into the margin-bottom: 20px; property on your outer div. To fix this, add a little padding or a border around the containing element.
Just tried this using your code and it works:
http://jsfiddle.net/hWPyD/2/
More info on collapsing margins:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Its because there is a default margin and padding on html tags. Use a reset like this one to remove all of the browser defaults. (I highly recommend doing this)