The input element seems to drag down the parent div. Why is this happening? How can I fix it?
The html
<div class="main">
<div class="one">
</div>
<div class="two">
<input type="text" /> <!-- Without this input, the page looks fine -->
</div>
<div class="three">
</div>
</div>
The css
.main>div {
display: inline-block;
height: 330px;
}
.one {
width: 18%;
background-color: #fbfbfb;
}
.two {
margin-left:10px;
width: 50%;
border: 2px solid #ddd;
}
.three {
margin-left: 10px;
width: 20%;
background-color: #bbb;
border: 5px dashed #ddd;
}
Here is the effect: http://jsbin.com/gubozapove/edit?output
It is because you have given: display: inline-block;. To work around this, give:
vertical-align: top;
Preview
Reason: Inline Block elements tend to align to the baseline by default.
Fiddle: http://jsbin.com/kitazeweqi/1/edit?output
Add
vertical-align: text-top;
to your .main>div.
You can fix it adding float: left; to .one and .two
Related
Hi Everybody and tks in advance for your help... I'm looking for the best practice to resolve a simple question:
.left {
float: left;
width: 79%;
margin-right: 1%;
}
.left img {
float: right;
}
.right {
float: right;
width: 20%;
}
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">A TEXT</div>
</div>
How should I center the text vertically at the middle of the image (obviusly not using px in margin-top or bottom, because the width/height of the image will be dinamic).
Thanks!
You could use flexbox. See the example:
.main{
display: flex;
align-items: center;
}
https://jsfiddle.net/zb2ozq1k/1/
I'd get rid of float and use table-cells instead. Then, use vertical-align:middle for the text.
Like this:
.main{
display: inline-table;
border: 1px solid blue;
}
.left {
width: 79%;
margin-right: 1%;
display: table-cell;
border: 1px solid green;
}
.right {
width: 20%;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">A TEXT</div>
</div>
h1 {
display: inline;
vertical-align:top;
}
<div class="middle">
<img src="http://placekitten.com/200/150" >
<h1>A TEXT</h1>
</div>
So I have a red bar inside a container which lies between two black boxes. The boxes are fixed in size while the red bar and the container are based on percentages.
My goal is to reduce the size of the container, as well as the red bar without the right black box breaking onto the next line. I was able to resolve the issue via custom mathematical calculations in JavaScript, but I want to keep functionality and design separate. I feel that there must be some way to solve this with CSS without hacks or extra div tags.
How can this be achieved?
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: 80%;
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
JSFiddle
CSS3 has a new flex display style supported by the major browsers.
.container {
display: webkit-flex;
display: flex;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
}
.bar {
width: 100%;
height: 100%;
background: red;
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
To set the box elements to a specific width use min-width rather than width
Use calc() in your CSS. It's from CSS3, but supported in all major browsers, even IE9.
.bar {
width: calc(100% - 60px);
}
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: calc(100% - 60px);
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
Try "table" layout
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container {
width: 80%;
height: 40px;
background: grey;
display: table;
}
.container > div {
display: table-row;
}
.container > div > div {
display: table-cell;
vertical-align: top;
}
.box {
height: 50%;
margin: 0 7px;
border: 15px solid black;
border-top: none;
border-bottom: solid 1px black;
/*float: left;*/
}
.bar {
width: 80%;
height: 100%;
background: red;
/*float: left*/
}
</style>
</head>
<body>
<div class="container">
<div>
<div>
<div class="box"></div>
</div>
<div class="bar"></div>
<div>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
I need to locate that question icon in middle of textarea height.
Vertical align does work.
I have main div .contorls, inside my link with question with float:right and after that textarea.
How to locate this icon?
<div class="control">
<textarea></textarea>
<div class="icon"></div>
</div>
.control{width:700px;height:auto;}
.icon{height:20px;width:20px;}
Here is a fairly simple way to do it.
Use CSS tables by applying display: table to the .control parent element and display: table-cell to the .wrapper child element. Within .wrapper, use vertical-align: middle to vertically center the icon element.
CSS tables are pretty well supported by most modern browsers so the solution is fairly robust.
.control {
display: table;
width: 700px;
height: auto;
border: 1px dotted blue;
}
.control .wrapper {
display: table-cell;
width: 100%;
height: 100%;
border: 1px dashed blue;
vertical-align: middle;
}
.icon {
height: 20px;
width: 20px;
margin-left: 5px; /* optional if needed */
background-color: tan;
display: inline-block;
}
<div class="control">
<textarea></textarea>
<div class="wrapper">
<div class="icon"></div>
</div>
</div>
I was looking if any one know how to interchange table cells positions using pure CSS. I have three divs similar to below
#content {
width: 1000px;
display: table;
float: none;
vertical-align: top;
border: 1px solid red;
}
#left {
float: left;
}
#right {
float: right;
}
#left, #right {
width: 200px;
display: table-cell;
right: 600px;
border: 1px solid grey;
}
#middle {
width: 600px;
display: table-cell;
float: left;
border: 1px solid grey;
margin-left: 200px
}
<div id="content">
<div id="left">some text and divs inside</div>
<div id="right">some text and divs inside</div>
<div id="middle">SOme more text and divs inside</div>
</div>
While loading the page, middle part flickers. So I am looking for a big help to interchange the positions of left and right using pure CSS.
Below code worked for me. Code concept took from Facebook after talking to David in comments. Thanks to him..
<div id="content">
<div id="left">some text and divs inside</div>
<div id="rightPart">
<div id="right">some text and divs inside</div>
<div id="middle">SOme more text and divs inside</div>
</div>
</div>
<style>
#content{
width: 1005px;
display: table;
float: none;
vertical-align: top;
border: 1px solid red;
}
#left{
float:none;
}
#right{
float:right;
}
#rightPart{
float: none;
vertical-align: top;
}
#left, #right{
width: 200px;
display: table-cell;
border: 1px solid grey;
vertical-align: top;
}
#middle{
width: 600px;
display: table-cell;
float: none;
border: 1px solid grey;
}
</style>
I'm trying to vertically center elements within a div, so per http://www.w3.org/Style/Examples/007/center.en.html, I set a min-height, vertical-align: middle and display: table-cell, but the text inside my div is still top-aligned.
<div id="fancybox-title-div" style="border: 1px solid black; min-height: 40px; display: table-cell; vertical-align: middle; width:50%; text-align: center; ">
<div style="height: 50px; float: left; width: 25px; background-color: blue"></div>
<div style="width: 70%">
<span>text</span><br><a href="'+link+'" >view comments</a>
</div>
</div>
Here's a jsFiddle for a visual:
http://jsfiddle.net/ccross59/gARYk/15/
What am I doing wrong?
My understanding and the way it has always worked for me is that display: table-cell has to be inside another element (like a div) with display: table.
Example:
http://jsfiddle.net/495Rm/
Example code:
div#top{
display:table;
height:100px;
border:1px solid red;
}
div#top{
display:table-cell;
vertical-align:middle;
}
Here's the solution from my comment: http://jsfiddle.net/thirtydot/gARYk/26/
HTML:
<div id="fancybox-title-div">
<div class="left"></div>
<div class="right">
<span>text</span><br /><a href="'+link+'" >view comments</a>
</div>
</div>
CSS:
#fancybox-title-div {
border: 1px solid black;
min-height: 40px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#fancybox-title-div .left {
display: inline-block;
vertical-align: middle;
height: 50px;
width: 25px;
background-color: blue;
}
#fancybox-title-div .right {
display: inline-block;
vertical-align: middle;
width: 70%;
border: 1px solid red;
}
If it matters, as it is this won't work in IE7. Here's a fixed version: http://jsfiddle.net/gARYk/27/
jsfiddle.net/gARYk/10 .... This is what you are looking for.