I'm trying to align a image with text on its right. I also wanted the image to align vertically with the text.
But when I start writing text, it goes under the image.
Any ideas as how to solve this??
<div style="float: left; vertical-align: middle">
<img alt="" src="/portals/85/Images/AukraMaritime.gif" class="Images" />
</div>
<div style="float: left;">
Aukra Maritime
<br />
<br />
<span>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </span><br />
<br />
www.aukramaritime.no
</div>
Remove float:left from the second div.
Notice how the text will start next to the image, and will then float under. To prevent this, add overflow:hidden to the text div, or give it a fixed width and float it to the left.
See http://jsfiddle.net/D7gGp/3/.
To align vertically, enclose both the image and the text in a div, absolute position the image, set top:50% together with a margin-top:-(halfImageHeight)px, and push the text to the right to give space for the image. See http://jsfiddle.net/D7gGp/6/.
You need to float your image to the left:
CSS
.Images { float:left; }
you can also use margin to adjust your text
.classname {
margin-top: 15px;
}
or
.classname{
margin : 1px 1px 1px 1px; (please change as per your requirement)
/*(BOTTOM, LEFT, RIGHT, TOP)*/
}
Related
In Internet Explorer 10 I have a problem with flexbox in this situation:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
</head>
<body>
<div style="width: 500px; background-color: grey;">
<table>
<tbody>
<tr>
<td>
<div style="display: flex; display: -ms-flexbox;">
<span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus dui, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The "text very long" exceed from the grey div. In other browser it works. Also in Internet Explorer 11. Now I inserted meta to set Internet Explorer 10 compatibility.
UPDATE:
I updated the code with your corrections, but it yet doesn't works in my situation.
looks like max-width or width is needed too. http://codepen.io/anon/pen/wGgWWW
DISCLAIMER: only tested via the devellopper tools and not a real IE10
.a{
display: flex;
width:50%;
background:red;
}
span {
display:inline-block;
max-width:100%;
}
<div style="width: 50%; background-color: grey;">
<div class="a" >
<span >Text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long very long text very long text very long text very long text very long text very long text very long</span>
</div>
</div>
EDIT from code edited in question.
A table is wrapping the flex container.
Table expands according to content, if table-layout:fixed; is set with a width, the flex container should stands within and child should wrap inline content. http://codepen.io/anon/pen/oxBeoz
table {
table-layout:fixed;
width:100%;
}
<div style="width: 500px; background-color: grey;">
<table>
<tbody>
<tr>
<td>
<div style="display: flex; display: -ms-flexbox;">
<span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus duploplopoloppl i, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Well, since the same code works in Chrome and not in IE, it seems that there indeed is a bug. I could fix your code on IE by using px instead of % for the second div, also by removing the table. Somehow the interaction of table and percentage is causing a bug.
For me it is clear that the problem is in the way width is computed. What does 50% mean? It is half the width of the offset parent, but the offset parent is the table division, which computes its width based on its contents. You get a circular reference. Change the width of the div to a static px value and you break the circle.
Either way, what is the point of using a flexbox inside a table?
It looks like you forgot to close your <span></span> tag. I would start there. I have a working pen that works for IE10
http://codepen.io/cheapwebmonkey/pen/eZgzLP
I have a row of two columns, one column contains an image and the other column some text. Is there a way I can always vertically align the text within the column so that it is always centered vertically? You can see an example here on the fourth and fifth row of what I'm trying to do:
http://machinas.com/wip/hugoboss/responsive-img/
The height depends on the size of the image really so I can't really set a height of the column.
HTML
<div class="row">
<div class="large-6 column">
<div class="txt-block">
<h3>Lorem ipsum dolor</h3>
<p>Vivamus eget tempus magna. Proin dignissim, est ac mollis viverra, ligula leo fringilla dolor, in porttitor quam lectus eget augue. Etiam vel felis at mauris pellentesque cursus dignissim in nunc.</p>
<div class="center-wrap">
<div class="center">
Jetzt entdecken
</div>
</div>
</div>
</div>
<div class="large-6 column">
<img src="http://placehold.it/470x400" alt="">
</div>
CSS
.column {
display: table;
float: left;
height: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
}
You need to remove floats on the large-6 column div and add vertical align middle, also you should be displaying those as table-cells not tables. The row is acting as a table. See css below;
.large-6.column {
display: table-cell;
float: none;
vertical-align: middle;
}
If you don't need IE8 support then you can use CSS3 transform. In your case set top: 50% to your .txt-block and add transform: translateY(-50%); what will move the element 50% of it's height to the top.
JSFiddle DEMO
UPDATE
Other good solution is to style your divs a table instead of floating and use vertical-align: middle; as mentioned here by #Jay.
My web page renders as I expect in IE. When I get into Firefox, it renders an important div in the wrong place, throwing the layout off. From what I can tell, Firefox is just wrong. How can I get Firefox to render the div in the correct place?
I've put borders around three of the divs to make it easier to see where they're being rendered. The purple one is the one that is incorrect in FF, but correct in IE.
EDIT
JSFiddle: http://jsfiddle.net/PYy6t/1/
JSFiddle renders the code identically (and in the same manner as FF) in both browsers, but IE10 renders it as I want it, and as my screenshot shows, when actually running the page.
My code:
<div style="float: left; clear: both; width: 100%;">
<asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
</div>
<div style="width: 100%; float: left; clear: both;">
<hr />
<br />
</div>
<asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
border-width: 1px;">
 
<div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; ">
//details removed
<div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px;">
//details removed
 
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="Blank" style="width:100%">
 
</div>
<hr style="width: 100%;" />
The Firefox render:
The IE render:
As you can see, FF is starting the div way up above the header text and the top hr, despite the fact that both should be taking the entire width. This is causing the second hr to render underneath the red-bordered panel (along with a label that should be further down the page), rather than beneath the purple panel. What am I missing?
Your issue is known as the clearfix problem. It is not only occuring in FF, but also in webkit browsers (safari and chrome). I even think that only IE handles it as you state you expect it to.
The problem only occurs when you have a parent div container, with all its children floating inside it. For a better explanation i suggest googling 'clearfix'.
The solution stated by #Kev does indeed work, but it requires you to a an extra element to your DOM, wich is only used for styling, wich is considered bad practice. I suggest working with some sort .clearfix class. I usualy work with the one from twitter bootstrap:
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
All you have to do is apply it to your #divTop container and you should be fine. An explanation on how and why it works can be found here: http://nicolasgallagher.com/micro-clearfix-hack/
Your HTML is pretty invalid at all. I don't know if you're using some fancy CMS but it's not right at all.
you don't close your divs inside #divtop
using css inline in html is bad practice, as it's supposed to be very poor in changing it.
if you want your divs side by side, they have to get the style attribute float:left
if you want to wrap the purple div around the others, it has to have overflow:auto in order to resize with its children
InternetExplorer is NEVER right, try to develop with firefox, chrome or safari. These are supposed to be the best of the developer browsers.
The result in all this would be:
<div style="float: left; clear: both; width: 100%;">
<asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
</div>
<div style="width: 100%; float: left; clear: both;">
<hr />
<br />
</div>
<asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
border-width: 1px; overflow:auto">
 
<div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; float:left;">
<p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px; float:left;">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="Blank" style="width:100%">
 
</div>
<hr style="width: 100%;" />
If you can, then clear the float:left you have in your divs.
If thats not an option, then Kev answered how you can fix it.
float:left;//remove it or change it into
float:none;
I've created this fiddle. Take a look.
I'd like to code html+css to achieve result as shown on attached image: .
I mean the coding part with text and arrow box. Putting just position absolute is not an answer, cause I need text to float round the arrow box. Is there any way to do that?
I've alredy tried putting all kinds of floats on box and paragraf tag with text. Placing arrow box before, after and in paragraf tag. Also tried using vertical-align and position on arrow box.
Fiddle to play with:
http://jsfiddle.net/K2S5y/1/
<div class="content">
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas males elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
<div class="arrowMore">arr</div>
</div>
.content{width:170px;height:170px;border:1px solid red;}
.arrowMore{background:blue;width:70px;height:70px;}
Use clear:both ex.
<div style="float:left; width:300px">
<img/>
</div>
<div style="float:left; width:300px">
Text text text
</div>
<div style="clear:both"></div>
you can see the live example here:
http://webdesign.about.com/od/examples/l/bl-css-float-examples.htm#floating
#arrow {
float: right;
}
/* then possibly */
#arrow:after {
content: ' ';
display: block;
clear: both;
}
I have 2 divs that are side by side. They are both closable via jquery. When they are both visible, they have a fixed width, but when one is closed, I want the remaining div to expand to eat up the width that the closed div used to take up. Is there a way to do this using just CSS (aside from the close button), or do I have to resort to javascript?
The only method I could see for solving this with CSS would be to add classes to the containing element:
<div id="container" class="left|right|both">
<div class="left"></div>
<div class="right"></div>
</div>
Style the contents depending on what the parent class is. If left is the class, you give the first div a non-restricted width and hide the second div. The same goes for right and the second div. When the parent is both, you give both divs 50%.
All your JavaScript would need to do is handle which class is currently applied to the container.
You need to atleast write one line of javascript for this and then you can use css for the effect.
Using jquery, toggle a class to the parent of divs whenever you click on the close. Find the jquery code for the click on the close button and add
$("#parent").toggle("classname");
Use css like
#parent div { width: /*fixed*/100px; }
#parent.classname div { width: 100%; }
Does something like this work?
HTML:
<div id="parent">
<div class="right">div2</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>
<br />
<button id="remove">Remove Div 2</button>
CSS:
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background:green;
}
.left {
overflow: hidden;
height: 100px;
background:red;
}
JS:
$('#remove').on('click', function() {
var div2 = $('.right')
//div2.hide('slow'); // you could hide it as well
div2.remove();
});
Example:
http://jsfiddle.net/9Q86Y/
Edit
You could mimic tables by using
display:table
and
display:table-cell
See: http://jsfiddle.net/DUx3W/ (hat tip: #Jimmy Breck-McKye).
My original table fiddle: http://jsfiddle.net/6KkRL/