How do I align the text as in the picture below?
<div id="contact-info">
<div id="contact-list">
<div id="adresa">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</div
<div id="telefon"></div>
<div id="mail"></div>
</div>
</div>
#contact-info
{
width:300px;
height:300px;
background:url(images/BODY-CONTACT.png);
position:absolute;
right:0;
}
How can I solve this problem?
Fail to fix it as I want
www.avocat.dac-proiect.ro/wp
Generally, you should use div to nesting elements, in order to align them in a decent way. Also pay attention to the display:blockorinline. You could read more in W3C docs. My touch to this problem is as follow:
<div id="adresa">
<div id="addPadding" style="
padding: 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;display: inline;">
<div style="
float: right;
display: inline;
width: 80%;
">
<p style="text-align:left;">Calea Dorobantilor,nr.74,</p>
<p style="text-align:left;">bl.Y9,SC.2,Ap.25,<br>Cluj-Napoca,400609,
<br>Romania</p>
</div>
</div>
</div>
I used 2<div>, one wrap the two <p> and the other one wrap the <img>and the new '' (or you can just simply add padding on the <div id="adresa">).
it will get a more similar layout result to your mockup, I wish I could took screen shot for you.
you just need to fix the text-align:left and margin on <p>tag to finish your job.
NOTE: This is NOT the whole solution. I just gave you an idea about what approach should be used.
This is so simple ... For this you need to make <p> and <img> position: absolute;. like below
.centered {
position: absolute;
right: 12px;
top: 110px;
}
and add class to ps and img like
<p class="centered">....</p>
<img class="centered" src="...." />
Try this using different top and right values for each p and `img.
Although the CSS purists would tell you not to, I would just add a table
<table>
<tr>
<td>
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;">
</td>
<td valign="top">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</td>
</tr>
</table>
Related
I have the following code:
html
<div class="container">
<div class="float-left">
<img width="550" src="image.jpg" alt="" />
</div>
<div class="float-left">
<h1 class="new">Some long text here that should word wrap</h1>
</div>
<div class="clear"></div>
<div>
css
.container{
width:960px;
}
.float-left {
float:left
}
.clear{
clear:both;
}
h1.new{
font-family: RockwellMT-Light;
font-size: 28px;
line-height: 31px;
}
I want the divs to act like 2 columns One will be the image and the second one should be text that can go down as much as it takes.
Since float left does not have a fixed width the problem is that the whole element h1 is jumping on the new line and the text does not goes on the next line.
I don't want to give fixed widths to the floating divs.
How can I prevent this?
You could remove class="float-left" from the second <div> and it would work.
you can try smth like this:
<div class="container">
<div class="something">something</div>
<div class="nextthing float-left">
<h1 class="new">Some long text here that should word wrap</h1>
</div>
<div class="clear"></div>
<div>
.container {
position: relative;
}
.something {
position: absolute;
}
.nextthing {
text-indent: size_of_.something;
}
Or change float:left, to display:inline-block;
I am designing a page, which has 2 left-sided tables (one below another), one more table on the right and block of text in the middle. Here is what I've tried:
CSS:
#left {
float:left;
padding-right: ;
}
#right {
float:right;
}
#center {
margin-left: ;
margin-right: ;
}
#text {
width:60%;
margin:0 auto;
}
HTML:
<body>
<div id="left">
<table style="width:; background-color:#>
...
</table>
<table style="width:; background-color:#">
...
</table>
</div>
<div id="right">
<table>
...
</table>
</div>
<div id="center">
<div id="text">
<h>My text goes here</h>
</div>
</div>
</body>
The central part (text) appears in the middle of the page, but it is right UNDER those three tables (left- and right-sided), not between them... How do I fix it?
Thank you!
why are you using float? put the div#center between div#left and div#right. Give your body a width. Now give div#left, div#right, div#center widht=33.33%, it should work. try it out.
Figured it out:
<div style="width: 70%;">
<div style="float: left; width: 20%;">Table1 and Table 2</div>
<div style="float: left; width: 60%;">My Text</div>
<div style="float: left; width: 20%;">Table3</div>
<br style="clear: left;" />
</div>
Found out there is more efficient way by using CSS3 Multi-column layout
http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx
Bootstrap has a framework, just apply .col-md-N to your divs
http://getbootstrap.com/examples/grid/
I know there are lots of ways to center content with an unknown width on a fluid width page in HTML/CSS but I can't get them to work in this case for some reason and need help.
Firstly, let me state that I need a solution that works in common browsers and in IE6 (don't ask why).
Here's an example of markup and the problem. In this example I want the yellow boxes centered inside the blue box.
example on jsfiddle.net
<div style="background:blue;margin:0 auto;width:100%;">
<table style="margin:0 auto;">
<tr>
<td>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<td>
</tr>
</table>
</div>
I tried this method using a table but I also tried the -50% +50% method. I am happy to use any method that works on all common browsers and IE6.
Can someone help me fix it.
Please do not lecture me on IE6 or incorrect use of the TABLE tag.
Try this,
<tr>
<td>
<div style="width: 379px;">
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
</div>
</td>
</tr>
what I understood from your requirement that you want to make your div to center ? then please have a look on the below code
<style type="text/css">
.yourclass
{
background:yellow;
float:left;
padding:50px;
}
.blueback
{
background:blue;
}
.mytable
{
width: auto;
margin-left: auto;
margin-right: auto;
}
div.clear
{
clear:both;
}
</style>
<div class="blueback">
<table class="mytable">
<tr>
<td>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="clear"></div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
</td>
</tr>
</table>
Hope it helps...
After lots of research I can find no solution to this that works in all browsers and doesn't require IE6 hacks.
The best solution is display:inline-block and IE6/7 and various other hacks (eg. FF2).
The final solution taken from here is as follows:
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
</style>
<li>
<div>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
alt="lobster" width="75" height="75"/>
</div>
</li>
How can i right-align text as below. I want product, price and year to be right-aligned.
product Computer
price $1500
year 2013
Currently the html code below gives layout as shown
product Computer
price $1500
year 2013
<div style="clear: both;display: block;">
<p style="float: left">
<strong>product</strong>
</p>
<p style="float: left">
<span>Computer</span>
</p>
</div>
<div style="clear: both;display: block;">
<p style="float: left">
<strong>price</strong>
</p>
<p style="float: left">
<span>$1500</span>
</p>
</div>
<div style="clear: both;display: block;">
<p style="float: left">
<strong>year</strong>
</p>
<p style="float: left">
<span>2013</span>
</p>
</div>
try display: inline-block, does wonders
Try aligning the left-floated words with text-align:right;.
Give the <p> tags some width and margin to your last child element inside the <div>. Then assign text-align: right to your first child element. It should look something like this jsFiddle example.
I would solve it using inline-block elements instead of floating ones. To stick a little to your markup you could do:
HTML
<div class="row">
<span>product</span>
<span>computer</span>
</div>
<div class="row">
<span>price</span>
<span>$1500</span>
</div>
CSS
div.row > span {
display: inline-block;
width: 100px;
text-align: right;
margin: 0 20px 0 0;
}
div.row > span:last-child {
width: 200px;
text-align: left;
}
Demo
Try before buy
As a note: You might think of using another element for your content:
A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.
If your data is actually tabular, you can use a <table>-element instead. You can also go with some markup like I did, or you can even use a definition list <dl> or an unsorted list <ul>.
Edit
As requested in the comments. Here's a version using a table:
HTML
<table>
<tbody>
<tr>
<td>Product</td>
<td>Computer</td>
</tr>
<tr>
<td>Price</td>
<td>1500 USD</td>
</tr>
</tbody>
</table>
CSS
table {
width: 350px;
}
table > tbody > tr > td:first-child {
width: 100px;
padding: 0 50px 0 0;
text-align: right;
}
Demo
Try before buy
What's the best way to add a caption below an image? The image and its caption will be floated right, and the text on the caption needs to wrap -- a 200x200px image shouldn't have a caption of width 800px.
I would strongly prefer a solution that allows me to update images (with different widths) without changing the CSS or markup.
For reasons beyond my control the image itself will also be floated right, but this should not be too problematic.
The image code is
<div class="floatright">
<img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>
and I can wrap this with HTML/CSS as needed. No JS on this page.
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.
Shameless plug: I blogged about this problem and my solution here, if you're interested.
Something like this: http://jsfiddle.net/QLcRC/ ?
You may use also use the HTML5 figure and figcaption elements and style those as #Wasim suggested.
<figure>
<img src="/test.jpg" alt="a test-image">
<figcaption>Description</figcaption>
</figure>
Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:
#content img[title]:after {
content: "[" counter(image) "] " attr(title);
counter-increment: image;
display: block;
text-align: center; }
The basic idea is to make one <div> with an <img> tag and <p> tag.
<div class="photo">
<img src="someimage.jpg">
<p>my caption
</div>
Now you simply set two styles. One for the img tag and the other for the p tag for the photo class.
Create a class name it photo:
.photo {float: right;width: 210px;margin: 0 10px 10px 10px;}
img.photo {float: right;margin-left: 10px;margin-bottom: 10px;border: 1px solid #666;
padding: 10px;}
Conclusion:
1. A div with an <img> tag and a <p> tag.
2. Div should have one class with different styles for <p> and <img> tag.
Pure HTML/CSS inline styled.
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all;"></div>
<!-- NEXT ROW -->
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="margin-top:0px;
padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all; height:100px;"> </div>
This is a known problem with current browsers. atlavis solution is the most simple. Until all browsers implement figure tag, then Feeela's way would work. But even then it would not be backwards compatible. I searched this issue for 3 days straight and I really hate the guys that made CSS decided to strip tables which were backwards compatible.
You could use the display: table-cell property on the class. But that is not supported by IE 6 or 7.