I am having some problems getting a small piece of text to be centered while floating next to an image.
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<img src="logocss.gif" width="95" height="84" />
<div style="position:relative; top: 20px;">
This
</div>
<div>
Other stuff...
</body>
</html>
(You can copy and paste this code into http://www.w3schools.com/CSS/tryit.asp?filename=trycss_float to see it in action.
What I would like is a way to vertically center the text while floating beside this image. and also not mess up text that comes after it. (as you can see, "Other Stuff..." is on top of "This")
I would prefer a pure CSS approach(or possibly restructuring of divs and such) because this is just an example showing the problem. The application it is being used in is very complex and having it all go into a table would require quite a bit of work, and possibly wouldn't look right.
UPDATE
Ok, I have ripped out part of my asp.net generated page that shows the problem I am having. I realize the code is ugly and apologize. It was generated by machine
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<table>
<tr>
<td>
<div style="line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
<span>This </span>
</div>
</td>
</tr>
</table>
Other stuff...
<br>
<br>
Actual application:
<br>
<div style="width:300px;">
<div style="width:300px;">
<input type="hidden"/>
<table border="0" style="border-collapse:collapse;border-spacing:1px;">
<tr>
<td style="width:250px;"><div style="line-height: 50px;">
<input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" /><span style="display:inline-block;color:Black;width:250px;">Email</span>
</div></td><td style="width:350px;"><table border="0">
<tr>
<td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td>
</tr><tr style="height:0px;">
<td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Sorry for big code but its a working example of my problem. I did the line height trick but it seems to have no effect here. Basically what I want is for the edit control to be vertically centered in the middle of the image(which is easy because of the table) and for the "Email" text to be vertically centered in the middle of the image. I can not make it work though in this arrangement. What am I doing wrong?
What about this? (note that the line-height value equals the image's height):
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style="text-align:right;line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
This
</div>
Other stuff...
</body>
</html>
UPDATE:
Considering the updated code, I came up with this:
<div style="width:300px;">
<div style="width:300px;">
<input type="hidden"/>
<table border="0" style="border-collapse:collapse;border-spacing:1px;">
<tr>
<td style="width:250px;"><div style="line-height: 84px; width:250px; text-align:right;">
<input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" />Email
</div></td><td style="width:350px;"><table border="0">
<tr>
<td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td>
</tr><tr style="height:0px;">
<td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td>
</tr>
</table>
</div>
</div>
I'm not saying it's the best way to do it, but I tried not to modify your code too much.
You don't need to wrap the text in a span in my opinion.
If you want to stick to using tables, then try looking at the valign="middle" property of the td element : http://www.w3schools.com/TAGS/att_td_valign.asp
But if you want to do that, you'll have to separate the image from the text and put them in different tds.
Slightly different solution than the one from Glennular. I'm not entirely sure how you want to do this, but the following centers the text This..., floats the image to its right (and it would wrap the text if it stretches to the image) and puts the Other stuff... below it.
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style="position:relative; top: 20px; text-align:center;">
<img src="logocss.gif" width="95" height="84" />
This
</div>
<div style="clear:right;">
Other stuff...
</body>
</html>
This might be what you're looking for.
I think you mean you want the image on the right side of the DIV. The float right will put it on the Right end of the container. Which has no size, ie. the whole screen.
<html>
<head>
<style type="text/css">
img
{
float:left;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style=" top: 20px;float:left;">
This
</div><img src="logocss.gif" width="95" height="84" />
</div>
Other stuff...
</body>
</html>
Related
So I know this can be achieved using Flexbox, but especially when working with very lightweight eCommerce sites where Bootstrap isn't loaded (like Shopify themes), sometimes we just want to stick with pure CSS for simplicity.
How do I achieve the same effect as this using CSS?
<center>
<table>
<tr>
<td>
<div>
<img ... />
<br />
<label ... />
</div>
</td>
<td>
<div>
<img ... />
<br />
<label ... />
</div>
</td>
</tr>
</table>
</center>
(Crude example, but hopefully it gets the point across.)
You need to set margin's for the div to auto. This will centre the div in the parent container.
div {
margin: 0 auto;
width: 100px;
}
When adding images to a table, I was able to size the first image's width and height but for some reason the second image will not register the height in the image tag. The code is as follows:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<p class="pic"></p>
</td>
<td>
<p class="pic2"><a link to image on Facebook> <img src="pic2FileName" width="150 height="200" alt="text"></a></p>
</td>
</body>
</html>
The problem is with the height="200" that is not registering in my code. I'm using SublimeText and the height also doesn't change to green like the height in my first image.
I can also post the CSS code if needed, but this is kind of a personal project so I want to post as little of it as I possibly can.
You're missing a closing quotation in your second image, after width.
<img src="pic2FileName" width="150 height="200" alt="text">
Should be:
<img src="pic2FileName" width="150" height="200" alt="text">
I'm trying to build a newsletter with table (I have to cause some emailclients ignore div boxes etc ).
The problem that I have is that I would like to have the text " Test test " on the same height beginning like the pic left to it. and the blue button should also be on the same height. I made a pic from the Photoshop layout how it should look like and on js fiddle so you see how it is now.
<tr style="background-color:#deeef4;">
<td width="250" cellpadding="0" colspan="2" valign="top" style="padding:15px 25px;">
<p style="display:inline;color:#00668a;">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span>
</p>
<br>
<img src="http://www.awesom-media.de/linie.png">
</td>
<tr style="background-color:#deeef4;">
<td width="300" style="padding:10px 25px;display:inline;">
<img src="http://www.awesom-media.de/ab1.jpg">
</td>
<td width="400" style="text-align:left">
<p>Test Test</p>
<ul>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
<li>6-Tages-Skipass für die Skiregion Obertauern</li>
</ul><img src="http://www.awesom-media.de/button.png" width="345" height="35" border="0">
</td>
</tr>
</tr>
jsfiddle
I updated your JSFiddle: http://jsfiddle.net/sBaNL/1/
I did two things:
Remove the top margin from the <p> surrounding Test Text
Make the surrounding <td> to vertically align its contents to the top:
.
<td width="400" style="text-align:left; vertical-align: top;">
<p style="margin-top: 0px;">Test Test </p>
...
</td>
To avoid all such uncessary margin, padding etc to all elements, you do the following in the beginning of the css files
*:{margin:0px;padding:0px;...}
This will overright all the browser's default properties.
It is due to p default display:block property which takes some margin by default.
Change it to display:inline and you can also remove the margin-top
p{
display:inline;
margin-top : 0px
}
Js Fiddle Demo
for image button you can add the margin-top style="margin-top:15px"
Here is my page structure with three column: 30-40-30
Here is fiddle: http://codepen.io/karimkhan/pen/BDfhJ
Proble is :
I want to position div in right section at particular height with div-height is 200px.
When I put style="height:150px" in right section div, right div remains on top and left and middle section move at 150px height.
Why?
<table border="0" width="100%">
<tr>
<td style="width:30%">
<div class="left">
Hi
</div>
</td>
<td style="width:40%">
<div class="middle">
<input type="text" id="url" width="80%">
<button type="submit" onclick="GetSentiment()" value="Submit">GetSentiment</button>
</div>
</td>
<td style="width:30%">
<div class="right" style="height:150px">
nice
</div>
</td>
</tr>
</table>
This is because the text in the <td> elements is vertically centered by default. If you apply styles to the <div>s in the other <td> elements, they will also behave. Alternatively, you can do <td valign="top"...> for each <td>.
EDIT: I notice that the code you posted above is much simpler than the code you posted on github. There may be other factors, including JavaScript or other styles affecting your production code. Without the production HTML, CSS, and scripts, it's impossible to determine everything that could be affecting the layout.
I'm currently fighting with IE. Before I get some rants about tables I know "dont use them", but I didn't write this, I'm just debugging it. I'd like to know if there is some hack to get the table spacing out of the flow on IE, when I absolute position a table. I included some style to help see the issue better. There is a bar of white space that doesn't belong to anything. This works great on FF and Chrome, IE just breaks the flow on this.
<html>
<head>
<style type="text/css">
.button{
float:left;
Background:#0F0;
}
#testCont{
Background:#F00;
}
#testUnder{
Clear:both;
Background:#00F;
Color:#FFF;
}
.tablePop{
position: absolute;
top:60px;
left:60px;
Background:#CACACA;
}
</style>
</head>
<body>
<div id="testCont">
<div class="button">
Button1
</div>
<div class="button">
Button2
</div>
<div class="button">
Button3
</div>
<table border=0 cellspacing=0 cellpadding=0 class="tablePop">
<tbody>
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td>
Row 2
</td>
</tr>
<tr>
<td>
Row 3
</td>
</tr>
</tbody>
</table>
</div>
<div id="testUnder">
Hello World
</div>
</body>
</html>
Put your page in standards mode:
<!DOCTYPE html>
<html>
<head>
You can test this out quickly by pressing F12 and switching the document mode to standards.
Alternatively, you could also use display:inline instead of float:left for .button.