I want the input to be width: 100%; and be on the right of the image.
Is it possible without using a table? If it is how can I achieve that?
HTML:
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
<input/>
</div>
CSS:
input {
width:100%;
float:left;
}
FIDDLE
Thank you
You could do this with calc()
FIDDLE
input
{
width: calc(100% - 130px); /* width of img + extra padding between */
}
You could also align the input by styling the img
img
{
vertical-align: middle; /* or top /bottom.. etc */
}
Demo: http://jsfiddle.net/abhitalks/DL8kG/9/
Idea:
Wrap your image and input in their own containers. Use display: table-cell on containers. Use vertical-align: middle to line up. This will allow you to have 100% width.
Markup:
<div class="wrapper">
<div class="imgWrap">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
</div>
<div class="inputWrap">
<input/>
</div>
</div>
CSS:
div.wrapper {
width: 100%;
}
.imgWrap {
display: table-cell;
}
.inputWrap {
display: table-cell;
width: 100%;
vertical-align: middle;
padding: 4px;
}
input {
width: 100%;
}
Use a floating and overflow trick. Float your image to the left and place your input in a container that will have its overflow hidden. Give the input a width of 100%. The input's container will take up the remainder of the screen (what I assume you mean by 100%):
HTML
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
<div class="inp"><input/></div>
</div>
CSS
img{
float:left;
}
.inp{
overflow:hidden;
background:#F00;
}
.inp input{
width:100%;
}
JSFiddle
Please take note of how your default styles (padding, border..) will affect the total width of the input.
<div class="wrapper">
<div id="img">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
</div>
<div id="input">
<input/>
</div>
</div>
CSS
#input {
display:table-cell;
}
input{
width:100%;
float:left;
}
#img {
width:130px;
float:left;
border:1px solid black;
display:table-cell;
}
Fiddle
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" style="float:left"/>
<div style="float:left">
<input />
</div>
Related
Spent 2 days fighting with this: http://jsfiddle.net/DQFja/537/
Basically have a parent div called "table" and 2 cells in it. One cell has sub-div, another cell has an image. Image is not displayed on the top left side of the div as I would've expected. This can be fixed by removing "height" attribute from the sub-div but I need it (the div is used for background and cell1 is also used for background).
<div id="table">
<div id="cell1">
<div id="sub-cell1">
</div>
</div>
<div id="cell2">
<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="20"/>
</div>
</div>
#table
{
display:table;
height:103px;
}
#cell1, #cell2
{
display:table-cell;
}
#cell1
{
width:50%;
height:103px;
background-color:green;
}
#sub-cell1
{
width:100%;
height:103px;
display:inline-block;
}
#cell2
{
width:1000px;
height:103px;
background-color:red;
}
Could anybody explain me why the image is not positioned on the top left side in the second div here? It works as expected if image is removed or if the sub-div is removed or if "height" attribute of the sub-div is removed.
table behave in such way to center elements vertically
The solutions might be
1) you can add vertical-align: top; to the cell
2) use absolute positioning for the image
#cell2
{
width:1000px;
height:103px;
background-color:red;
vertical-align: top;
}
http://jsfiddle.net/DQFja/539/
Try the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.table {
display: table;
width: 100%;
}
.tableRow {
display: table-row;
}
.tableCell {
display: table-cell;
height: 103px;
}
.tableCell:first-child {
background-color: green;
width: 50%;
}
.tableCell:last-child {
background-color: red;
}
img {
height: 20px;
}
</style>
</head>
<body>
<div class="table">
<div class="tableRow">
<div class="tableCell">
<div class="subDiv">
</div>
</div>
<div class="tableCell">
<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/8r262g29/
I'm trying to center vertically a floated div, here is the JSFiddle
.wrapper{
width:250px;
background-color:red;
}
#SmileImg{
height:100px;
width:auto;
}
.textwrapper{
float:right;
}
<div class="wrapper">
<img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" />
<div class="textwrapper">
<p>Please Smile!</p>
</div>
</div>
I do not know how to put the text "Please Smile" vertically centered.
Hope someone will help me. Please be patient I am not an expert!
Thank you in advance!
Floating elements cannot be vertically aligned, you should either use inline blocks, or set line height equal to image height for your text. One more way is to use "display: table-cell"
example with inline blocks:
.wrapper{
width:250px;
background-color:red;
}
#SmileImg{
height:100px;
display: inline-block;
vertical-align: middle;
}
.textwrapper{
display: inline-block;
}
<div class="wrapper">
<img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" />
<div class="textwrapper">
<p>Please Smile!</p>
</div>
</div>
use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper{
width:250px;
background-color:red;
display: table;
}
.item{
display: table-cell;
vertical-align: middle;
}
#SmileImg{
height:100px;
width:auto;
}
<div class="wrapper">
<div class="item">
<img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" />
</div>
<div class="item">
<p>Please Smile!</p>
</div>
</div>
hey there is there a way i can align the contents of a div tag to the bottom without using position:absolute. almost all other solutions on the internet uses position:absolute and/or vertical-align:bottom, but is there a way to do this without using position:absolute , let's say for example how do i align the cat in the image to the bottom of the div in this fiddle thanks!
the other solution i was thinking of was filling up the empty space at the top so that the image gets pushed down to the bottom but i also have no clue on how to do that either.
P.S. Please don't suggest using tables in the div, if that's possible.
You could try something like
<div style="border:1px solid black; height:100px; display:table; width:100%;">
<div style="display:table-cell; vertical-align: bottom;">
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:block;" />
</div>
</div>
You can use flexbox to solve this problem: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Demo
html
<div class="content">Content</div>
<div class="footerLike">
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>
css
.content {
height:calc(100% - 102px); /* 100% - height of footer - borders */
}
.footerLike {
border:1px solid black;
height:100px;
}
body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
Demo, as said in comments
<div class="footerLike">
<div class="dummy"><!-- you can put anything here --></div>
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>
.footerLike {
border:1px solid black;
height:100%;
}
img {
height: 100%;
display: block;
}
.dummy {
height: calc(100% - 100px);
}
body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
I need 3 column layout, first and 3rd column sizes are variable because there will be image or some variable length text(or another image) but i need middle to fill the rest space with background image, something like this if it would work like i imagine :
HTML:
<div class="left-vp">
<img src="~/Content/images/vp1.png" />
</div>
<div class="mid-vp">
</div>
<div class="right-vp">
<p>
//some text here or another img
</p>
</div>
CSS
.left-vp {
float: left;
}
.mid-vp {
height: 2px;
background: #FFFFFF url("images/dot.png") repeat-x;
width: 100%;
}
.right-vp {
float: right;
}
Is something like this possible with CSS?
If you have control of the markup, and don't mind making changes, you can use table block styles to accomplish this. It's the only way I know of which will handle all scenarios and resizing.
HTML
<div class="container">
<div>
<div class="col col1">
<div class="nowrap">Column 1</div>
</div>
<div class="col col2 fill center">
<div class="nowrap">Column 2</div>
</div>
<div class="col col3">
<div class="nowrap">Column 3</div>
</div>
</div>
</div>
CSS
.container { width: 100%; }
.container { display: table; }
.container > div { display: table-row; }
.container > div > div { display: table-cell; }
.container > div > div { padding: .5em; }
.container .nowrap { white-space: nowrap; }
.container .fill { width: 100%; }
.container .center { text-align: center; }
.col1 { background: red; }
.col2 { background: blue; }
.col3 { background: green; }
In action: http://jsfiddle.net/Vxc3n/1/
A few things to keep in mind:
If your first and 3rd columns contain text, you will need to wrap them in a DIV which has the white-space: no-wrap CSS style
If you have more than 1 fill column, ensure the width total = 100% (eg, 2 columns, use 50%)
You won't be able to shrink the columns beyond the minimum required width
HTML
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS
#container{width:100%;}
#left{float:left;width:100px; height: 100px; background-color: gray;}
#right{float:right;width:100px; height: 100px; background-color: green;}
#center{margin:0 auto;width:100%; height:100px; background-color: blue;}
in action -> http://jsfiddle.net/5xfR9/39/
I'm not sure what your actual requirements are for that central column but if it's just to contain a background as in the question could you not move the background styles to the container itself?
As an expansion on Eriks' jsfiddle: http://jsfiddle.net/5xfR9/46/
HTML
<div id="container" class="clearfix">
<div id="left">some text</div>
<div id="right">some text</div>
</div>
CSS
#container{ width:100%; background-color: blue; }
#left{ float:left; height: 100px; background-color: red; }
#right{ float:right; height: 100px; background-color: green; }
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
I've added a clearfix class to make sure the container actually contains the columns so that the background can show through (this is the clearfix class from a version of HTML5 Boilerplate).
You just need to play around with min-width and max-width properties until you get what you want. And it seems to work easiest when you give the columns a max-width as a percentage of the body or a wrap.
Here is a working example i put together:
http://jsfiddle.net/76Ep3/1/
HTML
<div id="wrap">
<div id="left">LEFT content...</div>
<div id="center">CENTER content...</div>
<div id="right">Right content</div>
</div>
CSS
*{margin:0;padding:0;}
body, html{
height:100%;
}
#wrap {
min-width:390px;
height:100%;
}
#left{
float:left;
min-width:100px;
max-width:37%;
margin:0 auto;
background-color:blue;
height:100%;
}
#center {
float:left;
min-width:100px;
max-width:20%;
background-color:red;
height:100%;
}
#right {
float:left;
min-width:100px;
max-width:37%;
background-color:yellow;
height:100%;
}
I want to have a container with a set width and height.
Within that container I have:
a vertically and horizontally centered text
a few vertically centered icons on the left side of the container
a few vertically centered icons on the right side of the container
My test code:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
display:inline-block;
font-size:18px;
text-align:center;
}
.iconsleft, .iconsright {
display:inline-block;
}
.iconsright {
right:0;
}
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">centered text</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
</div>
(I took a random icon from google for this test)
This is what my test code looks like and what it should look like:
http://imgur.com/0QfcQnF
CodePen
I try to avoid floats:
http://jsfiddle.net/techsin/Gz4nv/1/
Things I did:
Inserted Blank content which has its type set to inline-block (by default content added by css content:'etc' is inline element), and make it 100 percent the height of container, thus stretching the line height to height of container. So when i would vertical-align something it would see whole height of container as something to get aligned with.
Declare container position as relative. Which would help in positioning icons absolutely. Because absolute positioning refers to first parent element that has been explicitly positioned relatively. position:relative.
Than simply put left:0; on left container and right:0; on right one.
make them both move down 50% the height of container.
Then make them move them up 1/4th the height of container to bring them in center vertically by giving them negative margin.
Demo
If you want the icons to go to one side, you should tell them to float in that direction.
The text isn't centered because it only takes up as much space as it needs. Explicitly setting a width, will tell it to take up more space, and thus allow the text to be centered. This could be in pixels or percentages. For example if you have a container with width A and four images with width B (each), you could set the width to A - 4B pixels.
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright {
display:block;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
Just float the two side <div>s to left and right, and put the right <div> before the centered <div> in the HTML structure.
Demo here
<style>
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
font-size:18px;
text-align:center;
}
.iconsleft {float: left;}
.iconsright {float: right;}
</style>
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">Centered demo text</div>
</div>
By changing the container height and giving it some bottom padding, you can make the full box vertically centered.
Bonus demo
Change height: 70px; in .container to this:
height: 50px;
padding-top: 20px;
text-align: center needs to be set on the parent block, not the centered block, if you have display: inline-block.
Also vertical-align:middle; won't do you any good, unless you're in a table cell (or a div styled like one). If you want "real" vertical centering on IE7+ use good ol' tables, in conjnction with vertical-align: middle. Or just fake it with margins.
For .iconsleft and .iconsright use you might want to try floats, or position: absolute;
CSS:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
margin:auto;
text-align:center;
}
.text {
font-size:18px;
margin-top: 22px;
}
.iconsleft, .iconsright {
margin: 20px 10px 0;
}
.iconsleft {
float: left;
}
.iconsright {
float: right;
}
HTML (floats need to be written before the content):
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="text">centered text</div>
</div>
Demo with vertical and horizontal align.
I used a simple grid system to align everything up - CSS:
.grid {
width:200px;
height:70px;
float:left;
}
HTML:
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
<div class="grid text">centered text</div>
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
I know this may not be the the perfect way but I think this hack might help:
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright, .text {
display:inline-block;
margin-top:20px;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}