Please take a look at my fiddle. I am trying to have a input field next to a 32x32 icon. For some reason there is white space that hangs off the bottom of my div. Both the div and image should be 32x32px I'm doubtful it's my browser but I can't figure it out:
http://jsfiddle.net/WbhgA/1/
Here's what I'm seeing
http://i.imgur.com/3C1eN.jpg
Try this - http://jsfiddle.net/WbhgA/15/
.inputHolder {
height: 32px;
margin-right: 60px;
}
.inputHolder input {
border: 1px solid;
border-radius: 6px;
width:100%;
height: 32px;
line-height: 32px;
}
.icon {
border: 1px solid red;
border-radius: 6px;
width: 32px;
height: 32px;
float: right;
margin-top: -32px;
background: transparent url(http://icons-search.com/img/fasticon/icomic_lnx.zip/icomic_lnx-icons-32X32-web.png-32x32.png);
}
You have padding-right of 20px on the input div
so
.inputHolder {
display:table-cell;
width:100%;
height:32px;
}
Fiddle here http://jsfiddle.net/WbhgA/13/
Update: oh that space
you just need to align it vertically
.inputHolder {
display:table-cell;
width:100%;
height:32px;
border:1px solid red;
vertical-align: middle;
}
Related
I have 4 divs in this order : #header , #content, #navigation, #footer.
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
float: left;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
I am learning css, and in this scenario my understanding is that a non floated block level div named "navigation" will move in to take the place of a left floated div "content".
The text 'NAVIGATION' inside of the div with id "navigation" is not hiding behind the #content div and is instead appearing inside of #footer div.
After going through this question Text in floated div I learnt that content in following div will float around this floated div.
Now since this #content div is only 75% wide, why is the NAVIGATION text not appearing right next to the #content div ? Why does it appear inside of the #footer div ?
display:inline-block is a better way to use float
inline-block is better than float, The reason that using the float method is not suited for layout of your page is because the float CSS property was originally intended only to have text wrap around an image and is, by design, not best suited for general page layout purposes
Yo can do this, first remove
float: left;
in #content and add
display: inline-block;
and add
display: inline-block;
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
display: inline-block;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
display: inline-block;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
My scenario here:
Inside the div which is mentioned below I need to add Find Out More link in right bottom of the div which should contain different bg-color in other words a box structure with an arrow image at the last.
.answerbox
{
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}
How It should look :
Do you mean like this? Here's a jsfiddle
By setting the parent (.answerbox) to position: relative, I'm able to set .more to position:absolute and position it wherever I like in that box; In this case, bottom right of the container.
HTML
<div class="answerbox">
Find out more
</div>
CSS
.answerbox {
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
}
.more {
background: red;
position: absolute;
bottom: 0;
right: 0;
padding: 0 10px;
height: 30px;
}
Edit - In case you want an arrow image on the button
Updated Fiddle
CSS
.more {
background: url('http://dc390.4shared.com/img/AgV87Tvx/s7/arrow_small_right.png') no-repeat left center red;
position: absolute;
bottom: 0;
right: 0;
height: 30px;
padding: 0 10px 0 20px; /* Extra padding left to make room for the button */
line-height: 30px; /* Used to center the text vertically. Use the same value as the height.*/
}
Edit - Let the box grow with the content
Updated Fiddle
CSS
.answerbox {
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
padding: 10px 10px 40px;
}
did you mean something like this:
<div class="answerbox">
<a href='#' class="findout">
find out more..
</a>
</div>
and
.findout
{
position:relative;
top:120px;
left:20px;
background-color:white;
color:Red;
}
see fiddle
Question: I'm trying to get all the elements to align and fit into one div without overflowing. Why are some div's sticking out if the parent div is set to overflow:hidden? How can I fix this?
Example: http://jsfiddle.net/YNS8b/
Thanks!
Code:
<div id = "top_bar" >
<div id="top_left_button" >border</div>
<div class="trapezoid-border"></div>
<div class="trapezoid"> border </div>
</div>
#top_bar{
background-color: #000;
border-bottom: 1px solid #666;
color: #222;
position:fixed;
left:0px;
top: 0px;
width:100%;
overflow:hidden;
height: 50%;
font-weight: normal;
white-space: nowrap;
color: white;
z-index:20;
line-height: 45px;
min-width:320px;
max-width: 320px;
max-height:48px;
border-radius: 5px;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
}
#top_bar:after {
content: '';
width: 10%;
display: inline-block;
font-size: 0;
line-height: 0
}
.trapezoid{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid #446DB2;
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 50px;
display: inline-block;
right:1px;
z-index: 100;
}
.trapezoid-border{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid rgba(225, 225, 225, 0.5); /* Color Changed will be pseudo-border color */
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 53px; /* Extra 3 pix when compared to .trapezoid class width */
display: inline-block;
right:1px;
}
#top_left_button {
color: white;
height: 100%;
overflow:hidden;
display: inline-block;
text-align: center;
vertical-align: middle;
}
#top_left_button{
width: 20%;
border-right: 2px solid #666;
background-color: #446DB2
}
At one time browsers supported rounded corners, but didn't always mask all of the contents that might appear within the curve of the border itself. Many solutions were suggested, including rounding any children that appear in proximity to the parents already-rounded corner, using proprietary features like a webkit mask, etc. Today, modern browsers will mask the contents far better, so this should no longer be an issue. In fact, opening this demo up in modern versions of Chrome and Internet Explorer reveal that the browser has itself corrected the behavior.
Additional discussion can be found here: How to make CSS3 rounded corners hide overflow.
take a look at this Code. i want the Left & Right Box (DIVs) to appear in one line.. how to do it
<div><div style="float:left">a</div> <div style="float:left">b</div></div>
<div style="clear:both"></div>
Float both the left and right divs to the left and clear the footer. You will also need to adjust the widths of the left and right divs for them to fit on the same line.
#left
{
position:static;
width: 40%;
height: 50px;
margin-top: 10px;
margin-right: 10px;
background: #111111;
border: solid 3px #ff0000;
float: left;
}
#right
{
position:static;
width: 40%;
height: 50px;
margin-top: 10px;
margin-right: 10px;
background: #111111;
border: solid 3px #ff0000;
float: left;
}
#footer
{
position: static;
width : 100%;
height : 50px;
margin-top: 10px;
background: #111111;
border: solid 3px #ff0000;
text-align: center;
clear: both;
}
With this css
.addProblemClass{
width:300px;
height:300px;
/*width:25%;
height:40%;*/
border:solid 1px #000000;
margin: 5px;
background-color:#FFFFFF;
padding:5px;
opacity:0.9;/*For chrome and mozilla*/
filter:alpha(opacity=90);/*For IE*/
}
.boxHeader{
border: solid 1px #000000;
height: 20%;
padding: 5px;
}
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
height: 100%;
}
.addProblemHeaderImageDiv{
border:solid 1px #00FF00;
float: left;
width: 20%;
height: 100%;
}
and this html
<div class="addProblemClass">
<div class="boxHeader">
<div class="addProblemHeaderImageDiv"></div>//DIV A
<div class="addProblemHeaderTextDiv"></div>//DIV B
</div>
</div>
why DIV A and DIV B are overllaping?
Use
float: left;
to addProblemHeaderTextDiv class
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
float: left;
height: 100%;
}
Edit
Why it is shown in two rows?
Since you are specifying the width as 20% and 80% they will fill up the entire space. You are also setting the border, so it won't fit in the 100% space. You can either reduce the width of any div or remove the border.
You cant do this because of the CSS Box model.. it adds the 1px border like this
20% + 80% = 100% width + 1px border
This could work, by subtracting the border again with margin. Else you must use more markup i am afraid.
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
margin: 0 -1px;
height: 100%;
float: left;
}
.addProblemHeaderImageDiv{
border:solid 1px #00FF00;
margin: 0 -1px;
float: left;
width: 20%;
height: 100%;
}