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;
}
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.
For responsive images, I am using the CSS properties background-image and background-size. This allows the image to automatically resize when the browser window is resized. The problem is, content below the image is not also resizing. For example, in this set up I have an image above a paragraph of text:
<div class="container">
<div class="image></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula lacinia, eleifend risus nec, adipiscing magna. Integer egestas fermentum lectus, ac bibendum diam faucibus eu.<p>
</div>
For the CSS I have:
.container {
width: 50%;
}
.image {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 100%;
height: 350px;
}
When the browser is adjusted, the image also is adjusted but since there is a set height to the image (350px), a gap forms beneath the image and the paragraph. Are there some CSS changes I can make that will allow the paragraph to stay directly under the image when the image is resized?
Here is a jsFiddle example http://jsfiddle.net/qKGt9/
You should not be using an image as a background if you want text to flow around it. Responsive design techniques will typically employ this trick to IMG elements:
/* Responsive image CSS */
img {
width: 100%;
height: auto;
}
I've forked your fiddle for a working example:
http://jsfiddle.net/WDFBR/
It requires some slight changes to your HTML structure and CSS. The main thing is that I'm using an IMG element instead of a DIV to display your image. Take a look at the goods under the hood of popular frameworks like Twitter Bootstrap and you'll learn a lot about good responsive design.
Does this fit the requirements?
.image {
background: url('http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1') no-repeat;
background-size: 100%;
padding-top: 66.667%; /* holds 3:2 aspect ratio */
}
Fiddle
<div class="container">
<div class="image>
<img src="image path" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula lacinia, eleifend risus nec, adipiscing magna. Integer egestas fermentum lectus, ac bibendum diam faucibus eu.<p>
</div>
</div>
try this..
Put the actual image in the html code, and set the universal width of img elements to fill 100% width of their parent containers:
HTML:
<div class="image">
<img src="http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1">
</div>
CSS:
img {
width: 100%;
}
Fiddle:
http://jsfiddle.net/philsinatra/qKGt9/3/
Here is your 100% solution:
Follow below URL, I have just recently answered on the same question.
Responsive CSS background image - how to make content follow
If need more help, most welcome :)
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)*/
}
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/