There are many examples of vertically aligned text on the left of the image, but these same examples do not work if I attempt to place the text on the right side of the image.
On working example for the text on the left of the image is this: http://jsfiddle.net/rVTcv/
HTML:
<div style="height:259px;" class="how-right">
<img src="img/how-it-works/num-1.PNG" width="267px" height="259px">
<span>JivaWay has a simple system to get you in shape in just 6 weeks. And it's so easy to follow, even people who have never exercised before can do it.</span>
</div>
CSS:
.how-right img {
float:right;
margin-left:20px;
vertical-align:middle;
}
span {
height: 259px;
display: table-cell;
vertical-align: middle;
}
If I attempt to move the text on the right by moving the float:right property of the image to the text, then I don't get the expected result.
Your approaching it wrong, simply float the image to the left and update the margin to the right side instead
http://jsfiddle.net/rVTcv/140/
.how-right img {
float: left;
margin-right: 20px;
vertical-align :middle;
}
Related
I have created a wrapper div (ctccon) within which I have two divs both floating left so that they are positioned next to each other. This works fine until I add an image or table inside the right div (conright) and then the added element gets pushed below the left div (conleft).
My css
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float:left;
width:40%;
font-size:0.7em;
}
.ctccon .conright {
float:left;
font-size:1em;
}
And my html (without added elements)
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div </div>
</div>
and with added elements
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="pic1.jpg"> </div>
</div>
I know it's probably something I haven't understood re floats but I have not found a solution. Any pointers?
-----update-------
I have since removed the image and added a table inside conright. Still getting the same issue as per the image below:
It will be better if you share an image of your error but:
I recreated your code with an image, and with a table, and it doesn't get push to the bottom of the other div.
But let me explain what might be happening to you:
1: You have 2 div that are pushed left, if one of them gets to have an space, it will put itself below your other div, why? because is pushed left!, if it is pushed left and there is nothing next to it. It will take that space and do what is intended to, float left.
2: If you want your div to stay to the right, put in your css code float RIGHT, and it will be in the right ignoring your left div (as long as it doesnot take the whole screen).
3: If your image takes more that the 60% left of the space the other div has available, it will get push to the button to be able to fit the image.
To solve your issue I think you can add this to your code in your conright div:
.ctccon .conright {
float:left;
font-size:1em;
width: 60%;
}
Why do you have to this this?, because if you dont specify the width of this div, and its content takes more space that 60%, it will get push to the bottom
Please if this doesn't answer your question provide a picture of your error.
that depends on the size of the image:
If the image plus the text become wider than the space left by the first div, it will go below the first div.
But you can add a width to the second div to avoid that - any width up to 60% should work.
Addition / snippet:
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float: left;
width: 40%;
font-size: 0.7em;
}
.ctccon .conright {
width: 60%;
float: left;
font-size: 1em;
}
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="http://placehold.it/400x300"> </div>
</div>
After trying to make the floats work, I just ended up using grids instead and modified the CSS code as follows:
.ctccon {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
}
.conleft {
font-size:0.7em;
}
.conright {
font-size:1em;
}
Now I get the layout I intended to get:
The added benefit to doing it this way, I suppose, will be making it easier to make the website responsive. I am using scss and breakpoints so I'd just need to change the css slightly for each breakpoint.
I had a few hours of looking for the solution of this problem and now I'm gonna ask you.
So, I'd like to position a text left to an image. The image should float to the right and the text to the left but vertically aligned. I know I have to align the image to the text but it's not working. Here's my code:
CSS:
div.sale {
text-align: left;
}
div.sale img {
vertical-align: middle;
float: right;
clear: right;
}
And the other parts:
<div class="sale">
<img src="imagelink" alt="" width="150" height="150">
<span style="height: 75px;">simply text</span>
</div>
I'd be glad if you can help me!
Best regards!
You can vertically center the text by using display: table in combination with the
vertical-align: middle property
Explanation
added display: table to the outer div, establish table/table-cell relationship
added width: 100% to outer div - so it takes up the full width of the parent container
added display: table-cell to the span containing the text
Because its a table, the order of span#text and div.sale img matters, so I put text before image
apply vertical-align: middle; to the div.sale span element
Here is a working demo - http://jsbin.com/yurajijuxi/1/edit?html,output
So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred neatly.
So far I have this view.
The CSS for the DIV wrapping the image is:
div.pararight {
width:451px;
height:272px;
margin:0px auto;
position:relative;}
Titled 'Pararight' because when the screen is this wide the divs should sit by side with the image on right.
The CSS for the DIV wrapping the text is:
div.paraleft {
width:480px;
margin:0px auto;
position:relative;}
Named 'paraleft' as the text will align to the left.
It's also important to mention. I think, these 2 DIVs are wrapped in another DIV which is:
div.hitterbox {
width:100%;
margin: 0px auto;
font-family: sans-serif;
font-size: 13pt;
line-height:18pt}
Mainly because there will be multiple of these hitterbox div's down the page and it was easier to copy paste and change the HTML content, don't need to explain that though I'm asking for your help!
Finally another piece of information is that the container holding the hitterbox is another DIV which has the CSS:
div.pagecontent {
padding:10px;
font-family: sans-serif;
font-size:12pt;
position:static;
text-align:center;}
Finally the HTML for it all:
<div class="pagecontent">
<div class="hitterbox">
<div class="pararight"><img src="images/Macbook.png" width="451" height="272" alt="Mac Book"/></div>
<div class="paraleft">The Onscreen Text</div>
</div>
</div>
</div>
I put pararight above paraleft so it aligns up and down that way as you can see. The white page container of all the DIVs mentioned below is 1200px wide at the moment so enough room to sit both of these guys side by side.
What would I need to to make the text DIV move to the side of the image and the image to the right. I have used float:left, float:right in the respective DIVs but then when its shrunk down to create the stack effect they are shifted right and left respectively until the user shrinks the page down to 480px when the text will be centred but the image will still float slightly right.
What have I done wrong here? :o
I would use display: inline-block, then add text-align: center in the parent element.
JSFiddle: http://jsfiddle.net/gW8r2/1
.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}
.parent > div {
display: inline-block;
}
.a {
width: 100px;
height: 100px;
background: red;
}
.b {
width: 200px;
height: 100px;
background: blue;
}
This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.
Given some code like below, could someone show me how I could align the content-meta-wrapper inside of the content div at the TOP RIGHT corner and then have the content inside the content div wrap around it like in the image? The pink highlight in the image below is the content-meta-wrapper div.
<div id="content">
all the content you see except the Half BOX in the right hand side
<div id="content-meta-wrapper">
<div id="content-meta>
The right that is aligned at the TOP RIGHT of the content diva
<div>
<div>
</div>
The reason I can't just view source from the image is because the image is from how my site is now with moving some stuff around in Photoshop.
Assuming it's marked up inside of the content <div>, you just need to pass float: right; to it, and it should do the trick.
The code I used in This Example is the following:
#container { /* Pure Looks */
margin: 5px;
padding: 5px;
border: 1px solid black;
}
#floated {
height: 100px;
width: 100px;
float: right; /* This is what counts!! */
background: red;
}
See this Awesome Article about Floats - by Chris Coyer of css-tricks.com
You should use the css rules,
float:left;
float:right;
these will align your divs in the correct postion, to keep things tidy make sure to give your div's a width.
I'm looking to create a header like:
<div id="header>
<span class="left></span>
<span class="center"></span>
<span class="right></span>
</div>
So have a header that's all inline. the left to all the way to the left, the right is all the way to the right, and the center is in the center of the header.
The challenge is #header is fluid. Any CSS suggestions. right now the best way I can think to get this done is with a table with 3 rows.
Thanks
Try this:
http://jsfiddle.net/z7k3J/
If you adjust the spacer bar in the middle of the page, you will see that all of your "columns" stay appropriately aligned.
The key is that all of the columns' widths add up to 100% and you float them all to the left (or right, it doesn't really matter). When your widths are percentage-based, they will adjust appropriately as the parent changes size.
If you only care about the text being right/center/left (and not images, etc), you could also make all of the columns 100% width and absolutely positioned, and then just use text-alignment:
http://jsfiddle.net/h7qB8/
Is there a reason that floating the left and right spans won't work for you?
Can you re-order the HTML to be left/right/center (or right/left/center)? If so, float the columns and use margins or borders on the center to hold it off the side bars.
This would be a good start:
<div id="header" style="position:relative;width:100%;">
<div class="left" style="position:relative;width:200px;float:left;"></div>
<div class="center" style="position:relative;float:left;text-align:center;"></div>
<div class="right" style="position:relative;width:100px;float:right;"></div>
</div>
This will center everything in the middle div and keep the other 2 divs to the side. Make sure the element containing the header div is set to position:relative;width:100%; as well.
You can also use display: inline-block on the inner elements, on the outer container do a text align center, and then on .left float: left; .right float: right. This would allow you to set a width on the spans, but keep them evenly spaced from the center. See:
#header {
width: 100%;
text-align: center;
}
.left, .center, .right {
display: inline-block;
width: 100px;
border: 1px solid green;
}
.center {
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
You don't mention it in your question but have it in your tag - if you're able to use CSS3 then the possibilities open up more. You can use the flex box layout: http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/ or css3 columns: https://developer.mozilla.org/en/CSS3_Columns