guys i have a problem trying to get two texts stick to the left and right of a container
I use the following
<h4>Better Tri-Blend T-Shirt</h4>
<span style="float: right ">£4 </span>
This looks like this
As you can see it works sorta with both aligned to left and right but the font size on the right is smaller than the left and not the same
How do I make the right font bigger (eg h4) or even bigger
I have tried covering in a h4 but that knocks out the right alignment
Amy help appreciated
Mark
Is this what you want?
Heading(h1, h2, h3..) are block elements, which means that they occupy full width.
Their font sizes are fixed and are defined by the browser, unless overridden by style-sheets.
To make 2 or more heading align with each other, make them display: inline; or display: inline-block;
Optionally you can use vertical-align:middle; to vertically center them if they are of different sizes.
h4,h2 {
display: inline-block;
margin-right:10px;
vertical-align:middle;
}
<div>
<h4>Better Tri-Blend T-Shirt</h4>
<h4>£4 </h4>
</div>
<br/>
<br/>
<div>
<h4>Better Tri-Blend T-Shirt</h4>
<h2 style="float:right">£4 </h2>
</div>
Simply insert the span inside the h4:
<h2>Better Tri-Blend T-Shirt<span style="float:right; ">£4</span></h2>
Related
I have 4 icons that align horizontally. However I would like to have them align with each other through a center line if that makes sense. At the moment they aren't matching up. The top of one image may be in line with the middle of another for example. The icons are of different sizes but I don't mind that, as long as the align centrally. Here is my html
<section class="feature">
<div class="grid_4">
<img src="images/image-1.png">
<p>
Email
iamapdige#<br>hotmail.com
</p>
</div>
<div class="grid_4">
<img src="images/image-2.png">
<p>
Mobile<br>
Call or text 085PIDGEON
</p>
</div>
<div class="grid_4">
<img src="images/image-3.png">
<p>
Facebook<br>
Check us out on Facebook!
</p>
</div>
<div class="grid_4">
<img src="images/image-4.png">
<p>
Twitter<br>
Tweet me! #pidgeon
</p>
</div>
</section>
And the relevant CSS
.feature {
margin-top: 70px;
font-size: 15px;
font-family: sans-serif;
}
.feature img {
float: left;
margin-right: 6px;
}
Thanks for any help. If it's not clear what I mean then I can upload a picture of the PS template to explain.
If the icons are all different widths but you want them all centered on top of each other, try putting the images in spans. Set the width of the spans to be the width of the widest icon, and use text-align:center on them.
Check this JSFIDDLE
Basically, you need to adjust the margins inside, and make the bordering container that i added equal to the sum of the widths and margins of the grid_4s.
so:
.feature{
width:600px;
margin:auto;
}
.grid_4{
width:100px;
margin:25px;
}
What the margin auto does is that is adjusts its margins automatically within section's width of 100%. the margins auto-position itself in the center based on the width of the container feature. therefore if you want your images central and aligned horizontally, then they need to perfectly equal the width of the feature div, so add up the width and margins (horizontally) and come with the answer as the width of feature, if you follow...
hope this helps!
I'd like to position two DIVs in another container so that the first is against the parent's left edge and the second is against the parent's right edge. Here's the markup I have so far:
<div class="parent">
<p class="flushleft">
This paragraph should be aligned left.
</p>
<p class="flushright">
This one should be aligned right.
</p>
</div>
How can this be done without using floats? I'd like to keep everything in the normal flow, if possible. Thanks!
Use display: inline-block in your css code.
Using your HTML, here's the CSS:
.flushleft{
width:50%;
display:inline-block;
}
.flushright{
width:50%;
display:inline-block;
}
Or since they're both identical - if you don't intend to style them further - you can use one class.
I have a page layout with two div. They are both float:left and so appear as columns next to each other. I want them to stay that way. However, if the text in the right-most div is too long then the whole text moves down below the left most column. This also happens if the text is short, but I make the browser window smaller. What I want is for the long text to take up more lines, but only within its own right column.
CSS:
.left{float:left}
.right{float:left}
HTML:
<div id="container">
<div class = "left">
<span>some text</span>
</div>
<div class = "right">
<span>some long text....</span>
</div>
</div>
Edit: Also, the left column should stay fixed.
Sounds like you want to do something like this:
http://jsfiddle.net/VV4Hc/8/
The outer container specifies the width those two divs should occupy. As you can see, they also have percentage widths so you can change the container's property without having to go back and change the divs.
Word of warning, remember to clear your floats as well, so other elements don't get "caught" in the float. To do that, just define an element with the property clear:both like this:
.container {
width: 1000px;
margin: 0px auto; /* This will center the container on the page. */
}
.left, .right {
float: left;
width: 50%;
}
.clearfix {clear:both;}
<div class="container">
<div class="left">...</div>
<div class="right">...</div>
<div class="clearfix"></div>
<p>I won't get caught.</p>
</div>
If you're looking to do this for layout, you may want to consider a CSS framework, which has these sorts of things perfectly measured based on a specified number of columns. See:
Bootstrap/Kickstrap
960.gs
Blueprint
You can set the positions for those divs like
.left{width: 50%; position:relative; top:0%; left:0%;}
.right{width: 50%; position:relative; top:0%; left:50%;}
I was able to solve it with a table. When the window is made smaller, at first only the right column is made smaller and the words squeeze down on more lines until the column has disappeared. If the browser is made smaller than the width of the left column, then the left column starts disappearing, cutting off words. Works in my Chrome and IE although I don't know about older IE.
.td_right{vertical-align:top; max-width:300px;}
.td_left{vertical-align:top; min-width:300px; width:300}
<table >
<tr>
<td class = "td_left">
stuff here
</td>
<td class = "td_right">
stuff here
</td>
</tr>
</table>
My designer came up with the following design thing:
However I'm not entirely sure how to get the text to stick at the bottom like you can see in the middle. I thought I could do something like (inline css is for example only):
<div style="vertical-align: bottom; height:30px;">
<h2 style="line-height: 15px;font-size: 15px;padding: 0; margin:0;">
Foo bar foo
</h2>
</div>
Suggestions?
Assuming you use two divs for each 'button', if you set the outer divs (the black bits) to be position: absolute or position: relative you can use bottom:0 on the inner div containing the text.
This'll have the effect of aligning the text div at the bottom of it's parent.
Note: You can't use the vertical-align property, as that only does what you expect if you're looking at a table-cell.
have a look at my code.
http://jsfiddle.net/Q8V4H/6/
The text within p element Telephone Dialer is being aligned using top-down approach whereas i want to align it in the center from all positions i,e top right bottom and left. here is the example output my code is producing.
I don't want any space there instead the text Download PC Dialer should be aligned in center of the div i.e from left,right,top,bottom and not just left and right.
here is the example image of what i want to achieve.
if i use text-align:center it will only align the text in center from left and right, not from top and bottom, and in this case i want to align it from top and bottom too. how do i do it?
thank you
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell;text-align:center;vertical-align:middle;padding:8px">
Download PC Dialer
</div>
</div>
<div style="display:table-row">
<div style="display:table-cell;text-align:center">
<img src="download.png">
</div>
</div>
</div>
This will give you the same behaviour as if you had used a table without the semantic issues of actually using a table. Works in all browsers except IE7 and below.
For horziontal alignment, you can use margin: 0 auto; on a fixed div element. For vertical alignment, you can set the line-height to be same as font-size.
Put it in a <div> and then put that in another <div>. The child div should have vertical-align: middle and line-height: Xpx where X is the height of the inner div.
Look here: http://phrogz.net/css/vertical-align/index.html