<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
Related
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>
This code:
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
Is coded with this css:
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
}
The problem is that if I put any text below the three columns created, it just adds another column! I want the footer to be below these columns, but I can only do this so far by setting this:
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
bottom:0;
}
And this just makes the page longer, i.e. puts a huge gap between this content and the footer.
Any solutions?
Thanks
Elements are floated left making document flow modified. Document flow needs to be reset right before writing footer. It can be done by setting property clear:both for the footer (in fact just after .columns are finished).
A working jsfiddle is here.
CSS:
footer{
clear: both;
}
Suggestion (outside scope of question):
You should change id="columns" to class="columns" as in valid html markup, id's should be unique. (thanks michael)
try this
demo
css
*{
margin:0;
padding:0;
}
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
background-color:red;
}
.clearfix{
clear:both;
}
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
border:1px solid red;
}
html
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div class="clearfix"></div>
<footer>footer</footer>
When using any floated items, the default behavior is for them not to count towards other content in that area, so they'd appear to one side of other content.
Of course, if you want to prevent that, the clear property will essentially continue below any floated items on one (or either) side before it.
footer {
height: 50px;
clear: both; /* can also use `clear: left` here */
}
try after removeing bottom:0; and put below html code after third column
<div id='footer'>
<p>Footer Content</p>
</div>
You need to use the css clear for your problem
like clear :both for id/class of you div
text
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div style="clear:both"></div>
<footer>footer</footer>
In creating a custom tree, I am using a image followed by a label. The issue is when the label overflows it goes under the image, rather I need it to be aligned with the starting point of text. How do I do that with css.
Sample code:
<html>
<body>
<div class="maindivclass">
<ul>
<li id="TR_239984" class="liclass">
<img src="http://dummyimage.com/32x16" class="imgclass" />
<label class="labelclass">This is a long text to show wrapping of the text from the box edge</label>
</li>
<li id="TR_239985" class="liclass">
<img src="http://dummyimage.com/32x16" class="imgclass" />
<label class="labelclass">This is another long text to show wrapping of the text from the box edge</label>
</li>
</ul>
</div>
</body>
</html>
Please check a sample here
I need to make it look like : http://imgur.com/Yp9hC
I need image and text seperate because clicking either does 2 different things, so cant use background image for list style, unless its possible using that also.
Thanks
Try this - DEMO
li {
position: relative;
list-style: none;
}
li img {
position: absolute;
}
li label.labelclass {
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
margin-left: 32px;
display: block;
}
This would be a perfect time to use CSS floats. Float both the image and the label to the left and give them defined widths. Make sure to "clear" the float on the .liclass
See http://codepen.io/imjared/pen/EDgHc
Try this:
.maindivclass {
width: 300px;
}
li {
float: left;
position: relative;
list-style: none;
}
.img_container {
float: left;
width: 40px;
padding: 0px;
}
li label.labelclass {
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
float: left;
width: 250px;
}
HTML
<li id="TR_239984" class="liclass">
<div class="img_container">
<img src="img.png" class="imgclass" />
</div>
<label class="labelclass">
This is a long text to show wrapping of the text from the box edge
</label>
</li>
I added a class .img_container because it just simplified setting the width without skewing the img.
Fiddle here
Hear I give you the best code for it.
HTML:
<div class="wrapper">
<div class="box-one">
<img src="http://dummyimage.com/32x16" />
</div>
<div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.
</div>
<div class="clear"></div>
<div class="box-one">
<img src="http://dummyimage.com/32x16" />
</div>
<div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.
</div>
<div class="clear"></div>
</div>
CSS:
.clear{
clear:both;
}
.wrapper{
width:800px;
background:#E6E6E6;
}
.box-one{
float:left;
width:50px;
margin-bottom:30px;
}
.box-two{
float:right;
width:750px;
}
Hope this definitely helps you. Cheer.
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; }
I have a layout like this:
Header div
divLeft divRight
Footer div
divLeft is a bunch of text and divRight is a div with some stuff in it. divLeft is a lot longer and I would like the text to wrap under divright. right now it's just making two columns and there's a lot of white space under divRight. Help? Thanks!
Put divRight inside divLeft and float it.
Try this:
CSS
<style type="text/css">
#primary, #header, #footer {
float: left;
width: 100%;
}
#secondary {
float: right;
width: 200px; /* or whatever width you want */
}
</style>
HTML
<div id="header">
</div>
<div id="primary">
<div id="secondary">
<p>Put your content here that goes on the right</p>
</div>
<p>Put your content here<br />
that goes on the left<br />
and should wrap under the right-hand column</p>
</div>
<div id="footer">
</div>
You can float divRight right. That should allow the left div to wrap under the right text.
Edit: You will also need divRight inside of divLeft as described by Donut.
Place divRight inside divLeft and give it these properties:
.divRight {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;
}
I have a very nice solution; take a look at the source of the example here.