I'd like to place a Div for image and a Div for text at the same baseline.
Below is my sample code and JSFiddle.
http://jsfiddle.net/xLrf7pyt/
<div class="wrap">
<div class="img">
<img src="http://www.cssportal.com/images/cssportal.png" />
</div>
<div class="txt">
This is text.
</div>
</div>
<style>
.wrap { width: 500px;}
.img { float: left; }
.txt { }
</style>
============ Update ================
Originally, there should be some empty space between image (logo at left-top corner) and text (navigation at right-top) with same baseline with image logo.
Drop the float from your .img element and instead set both .img and .txt to display: inline:
.img, .txt {
display: inline;
}
Then set .txt to have a vertical-align of baseline:
.txt {
vertical-align: baseline;
}
JSFiddle demo.
Use display:inline;
.wrap { width: 500px;}
.img { display:inline; }
.txt { display:inline; }
<div class="wrap">
<div class="img">
<img src="http://www.cssportal.com/images/cssportal.png" />
</div>
<div class="txt">
This is text.
</div>
</div>
Related
<html>
<head>
<style type="text/css">
img{
float: left;
}
</style>
</head>
<body>
<img id="img" src="imgsource.jpg">
<h2> Text that should be next to the image. </h2>
<p> Text that should be below the image and heading. </p>
</body>
</html>
The problem I'm having is that the text next to the image isn't centered and the next paragraph also goes next to the image when I would like it below the image and heading.
http://jsfiddle.net/dxbbog2k/
img {
vertical-align: middle;
width: 300px
}
h2{
display: inline;
}
p{
clear:both;
display: block;
}
<img id="img" src="http://dreamatico.com/data_images/kitten/kitten-3.jpg">
<h2> Text that should be next to the image. </h2>
<p>Text that should be below the image and heading.</p>
In order to do this, you should change your HTML structure a bit first:
<img id="img" src="https://placekitten.com/g/200/300">
<div id="text">
<h2> Text that should be next to the image. </h2>
</div>
<div class="clear"></div>
<p> Text that should be below the image and heading. </p>
Then use floats on the correct elements to position them next to eachother:
img, #text{
float: left;
}
Using display: table-cell and vertical align you can vertically center your text next to the image. Note: you must know your image height for this.
#text h2{
vertical-align: middle;
height: 300px;
display: table-cell;
padding-left: 10px;
}
Finally, don't forget to clear your floats so the rest of your text appears below the image.
.clear{
clear: both;
}
JSFiddle demo
I have a three div block inside main div which is head,content and footer.
I have facing few problems which are:
(1) images not fiting inside div
means i am try to find code for this situation:
<div style="height:10%">
<img src="abc.jpg" height="100%">
</div>
and
(2) I have a div which height is 80%,in this div i put three div their height is 20%, 60%, 20%.the div whose height is 60% has no data i write it for margin.(means first div 20% height has a data then 60% height for space then another div who has a data), so how to achive it?
(if possible please suggest without using margin-up or bottom
HTML code:
<div class="homebackground" style="height:100%; width:100%; background-image:url(../../stylesheets/images/Logo_with_Blu_bg.png); background-size:98% 88%">
<div class="bodyhead">
<img src="../../stylesheets/images/user_male.png"/>
</div>
<div style="height:80%">
<div style="width:100%">
<div class="mainbodyup" align="right">
<img src="../../stylesheets/images/phone.png"/>
</div>
<div class="mainbodyup"> </div>
<div class="mainbodyup">
<img src="../../stylesheets/images/groupchat.png"/>
</div>
</div>
<div style="height:60%; clear:both;" class="a">
<div class="mainbodymid"></div>
<div class="mainbodymid"></div>
<div class="mainbodymid"></div>
</div>
<div style="width:100%">
<div class="mainbodybot" align="right">
<img src="../../stylesheets/images/recent.png"/>
</div>
<div class="mainbodybot"> </div>
<div class="mainbodybot">
<img src="../../stylesheets/images/search.png"/>
</div>
</div>
</div>
<div style="height:10%;">
</div>
</div>
CSS:
.bodyhead
{
height:10%;
}
.bodyhead img
{
width: 10%;
}
.mainbodyup
{
height:20%;
width:33%;
float:left;
}
.mainbodyup img
{
width: 20%;
}
.mainbodymid
{
width:33%; float:left; padding:0px;
}
.mainbodybot
{
height:20%;
width:33%;
float:left;
}
.mainbodybot img
{
width: 20%;
}
.a:before
{
display: table;
content: " ";
}
.a:after
{
clear:both;
display: table;
content: " ";
}
If you want to fit the entire image in the div . try using
style="background:url('image-url') no-repeat; background-size: 100%;"
for the div which contains the Image . Rather using the image object .
style="background:url('image-url') no-repeat; background-size: contain;"
Use this code.
add one css to your existing stysheet
html, body{
height: 100%;
}
I have this header bar.
<div id="header">
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
</div>
I need the searchBar to fill whatever the remaining gap is in the div. How would I do this?
Here's my CSS
#header {
background-color: #323C3E;
width:100%;
}
.button {
padding:22px;
}
.orange {
background-color: #FF5A0B;
}
.red {
background-color: #FF0000;
}
.inline {
display:inline;
}
#searchBar {
background-color: #FFF2BC;
}
Use calc!
https://jsbin.com/wehixalome/edit?html,css,output
HTML:
<div class="left">
100 px wide!
</div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
Fills width!
</div>
CSS:
.left {
display: inline-block;
width: 100px;
background: red;
color: white;
}
.right {
display: inline-block;
width: calc(100% - 100px);
background: blue;
color: white;
}
Update: As an alternative to not having a space between the divs you can set font-size: 0 on the outer element.
You can realize this layout using CSS table-cells.
Modify your HTML slightly as follows:
<div id="header">
<div class="container">
<div class="logoBar">
<img src="http://placehold.it/50x40" />
</div>
<div id="searchBar">
<input type="text" />
</div>
<div class="button orange" id="myAccount">My Account</div>
<div class="button red" id="basket">Basket (2)</div>
</div>
</div>
Just remove the wrapper element around the two .button elements.
Apply the following CSS:
#header {
background-color: #323C3E;
width:100%;
}
.container {
display: table;
width: 100%;
}
.logoBar, #searchBar, .button {
display: table-cell;
vertical-align: middle;
width: auto;
}
.logoBar img {
display: block;
}
#searchBar {
background-color: #FFF2BC;
width: 90%;
padding: 0 50px 0 10px;
}
#searchBar input {
width: 100%;
}
.button {
white-space: nowrap;
padding:22px;
}
Apply display: table to .container and give it 100% width.
For .logoBar, #searchBar, .button, apply display: table-cell.
For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.
Use text-align and vertical-align in the table cells as needed.
See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/
I know its quite late to answer this, but I guess it will help anyone ahead.
Well using CSS3 FlexBox. It can be acheived.
Make you header as display:flex and divide its entire width into 3 parts. In the first part I have placed the logo, the searchbar in second part and buttons container in last part.
apply justify-content: space-between to the header container and flex-grow:1 to the searchbar.
That's it. The sample code is below.
#header {
background-color: #323C3E;
justify-content: space-between;
display: flex;
}
#searchBar, img{
align-self: center;
}
#searchBar{
flex-grow:1;
background-color: orange;
padding: 10px;
}
#searchBar input {
width: 100%;
}
.button {
padding: 22px;
}
.buttonsHolder{
display:flex;
}
<div id="header" class="d-flex justify-content-between">
<img src="img/logo.png" />
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
This can be achieved by wrapping the image and search bar in their own container and floating the image to the left with a specific width.
This takes the image out of the "flow" which means that any items rendered in normal flow will not adjust their positioning to take account of this.
To make the "in flow" searchBar appear correctly positioned to the right of the image you give it a left padding equal to the width of the image plus a gutter.
The effect is to make the image a fixed width while the rest of the container block is fluidly filled up by the search bar.
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
</div>
and the css
.container {
width: 100%;
}
.container img {
width: 50px;
float: left;
}
.searchBar {
padding-left: 60px;
}
in css:
width: -webkit-fill-available
I would probably do something along the lines of
<div id='search-logo-bar'><input type='text'/></div>
with css
div#search-logo-bar {
padding-left:10%;
background:#333 url(logo.png) no-repeat left center;
background-size:10%;
}
input[type='text'] {
display:block;
width:100%;
}
DEMO
http://jsfiddle.net/5MHnt/
Include your image in the searchBar div, it will do the task for you
<div id="searchBar">
<img src="img/logo.png" />
<input type="text" />
</div>
I did a quick experiment after looking at a number of potential solutions all over the place. This is what I ended up with:
http://jsbin.com/hapelawake
Starting with the markup
#row { }
#label { float: left; width:100px }
#image { float: left }
<div id="row">
<div id="label">Label Here</div>
<div id="image"><img src="http://placekitten.com/100"></div>
<div id="image"><img src="http://placekitten.com/100"></div>
</div>
As shown here: http://jsfiddle.net/Hyx5n/
I would like to move the label down to the bottom edge of the images. So it looks like this:
I have tried putting "position: relative" in the container and "position absolute" in the label div. But then the images are no longer in the same row: http://jsfiddle.net/Hyx5n/1/
You can do something like the following (http://jsfiddle.net/Hyx5n/10/). One of the many uses of vertical-align property. This involves removing the <div>'s and the float though. You can probably replace these with <span>'s with display:inline-block to give more flexibility.
HTML:
<div id="row">
<span id="label">Label Here</span>
<img src="http://placekitten.com/100" />
<img src="http://placekitten.com/100" />
</div>
CSS:
#row { vertical-align:bottom }
#label { display:inline-block; }
Try it like this: http://jsfiddle.net/uac3Z/
Basically,
<div id="row">
<div id="label">Label Heere</div>
<div id="images">
<div class="image"><img src="http://placekitten.com/100"></div>
<div class="image"><img src="http://placekitten.com/100"></div>
</div>
</div>
with
#row { position:relative; float:left; }
#label { position: absolute; bottom: 0; width:100px }
.image { float: left }
#images { margin-left: 110px }
I made a div#images that encapsulates both other div.image's. Then those div#row was set to float, having the text lying on the bottom. Hence, The div#label would appear above the image. In order to have the div#label on the left of the image, I made the div#images have a margin-left of 110px (as div#label would have 100px).
Also note that your current div#image should be a class and not an id, because you use it more than once.
Hope it helps :)
It should be very simple, but I am, so it's not ...
The first thing on the page, right after <body>, I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page.
Can you do that without knowing the width og the image?
Yes, put image in one div, and text in another, define "float: right" property for the div with the image, and "float: left" for div with the text in CSS
<div class="div1"><img src=...></div>
<div class="div2">text</div>
<style type="text/css">
.div1 {
float: right;
}
.div2 {
float: left;
}
</style>
<div id="banner">
<div style="float: left; width: 50%;">
left - just put your text here
</div>
<div style="float: right; width: 50%;">
right - just put your image here
</div>
</div>
You may also want to use a clearfix (google it) technique to ensure the banner div always has height no matter how big the image is.
Here's a fiddle : http://jsfiddle.net/KaHjd/1/
I've assumed that you want the image right aligned as well.
#header {
overflow:auto;
}
#branding {
float: left;
padding: 10px;
background: #00AA00;
}
#logo {
float:right;
padding: 10px;
background: #aa0000;
overflow:auto;
}
#logo img {
float:right;
}
<div id='header'>
<div id='branding'>
some text
</div>
<div id='logo'>
<img src='http://placekitten.com/200/100'>
</div>
</div>
Of course we can. But your image must be small enough in order for your text not to overflow the banner.
HTML
<div class="banner">
<span>Text goes here</span>
<img src="" alt="" />
</div>
CSS
.banner { overflow: hidden; width: 100%; }
.banner span { float: left; }
.banner img { float: right; }