I'm attempting to have text flow around images in the following fashion:
eg, images in two columns, with one image in the "center" column and a number of them in the right column. I tried "floating boxes" via display:inline-block; and I tried a table-like config using display:table/display:table-cell, but I was unable to provide the correct (changing) width for the text on the left.
(The apparent alignment of the 2nd parag of text with the bottom of the center image is not necessary.)
Appreciation for your assistance!
Here's a demo using float - does this accomplish what you want?
.column {
float: right;
}
.column img {
clear: both;
float: right;
margin: 5px;
}
<div class="column">
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
</div>
<div class="column">
<img src="http://via.placeholder.com/200x200" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
I need to make the text justified and the last line aligned to the right, here's what I've done:
CSS:
p{
text-align:justify;
direction:rtl;
}
HTML:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt gravida efficitur. Mauris auctor, lacus quis maximus viverra, arcu leo posuere magna, eget convallis lectus arcu vel diam. Nam sed diam eu ligula faucibus aliquam non eget tellus. Integer suscipit interdum enim, eu feugiat lectus cursus ac. Nunc ipsum lacus, rutrum eu neque in, ornare tristique nulla. Aenean convallis, metus non hendrerit convallis, magna tortor consequat velit, in laoreet tortor felis eu purus. Vestibulum venenatis, neque a hendrerit tristique, tellus urna convallis orci, ac sagittis magna nisl at est.</p>
<p>Duis dapibus lorem et tincidunt rutrum. Aliquam id ante venenatis massa egestas egestas. Quisque purus mauris, congue vitae nunc ac, vulputate vehicula massa. In in ullamcorper tortor, eu euismod felis. Donec suscipit pellentesque velit, in auctor mauris gravida id. Nunc at iaculis arcu. Etiam sed nibh eu urna auctor ullamcorper et non odio. Morbi vel augue id libero sollicitudin commodo at a ex. Proin fermentum augue at mattis consequat. Curabitur consectetur, nisi semper accumsan pellentesque, mi sapien maximus erat, eu venenatis dolor ipsum euismod nisi. Donec ut odio leo.</p>
JSFIDDLE:
https://jsfiddle.net/u1nbg939/1/
The problem is that it's messing up with the last line punctuation, it's going to the beginning of the line.
Any alternative (a cross browser one)?
The structure of my image and paragraphs is as follows:
<p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.</p>
<div class="_idGenObjectLayout-3">
<div id="_idContainer062" class="ObjExpOpt-Images">
<img class="_idGenObjectAttribute-1" src="image/animal.png" alt="" />
</div>
</div>
<p class="All-Book-Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet elementum ex, a porttitor arcu vulputate vitae. Mauris ac finibus nisi. Etiam at tellus vitae quam pretium eleifend. Donec at dictum nisi, id condimentum dui. Donec in tortor ipsum. Etiam sit amet turpis vulputate, maximus erat in, lacinia leo. Cras placerat lobortis fermentum. Phasellus vulputate libero et pellentesque mattis. Aenean tristique ante egestas nibh aliquet, a sagittis sem aliquam. Aenean sit amet diam elementum, cursus arcu non, vehicula lorem. Sed vitae ante id augue consectetur euismod. Suspendisse ac metus ut tortor mollis semper eget eu mi. Vivamus eleifend leo at felis bibendum rutrum. Proin condimentum consectetur velit, at tristique elit accumsan vel.</p>
When the page renders, the text of the lower paragraph overlaps over the image. How can I prevent this and make sure that the distance between the image and the parapgraph is 5 px and no overlap occurs whatsoever. Thanks!
Here's a live demo with my problem http://jsfiddle.net/zvnjnxnf/
Everything looks ok here: JsFiddle
p {display: inline}
img {display: block}
first, you should remove all the style for All-Book-Text and _idGenObjectLayout-3
then add the following css :
._idGenObjectLayout-3{
padding : 5px;
}
I've seen a property that allow you to fill the entire width of a container with text, ala magazine style. It simply increases the space between words to accommodate for the additional space.
What is this property?
You're thinking of text-align: justify.
div {
text-align: justify;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec nisl ipsum, at ullamcorper justo. Vivamus ac dui lorem. Aliquam nec diam urna, in semper augue. Etiam commodo dui velit. Vestibulum in nibh nulla, a feugiat justo. Proin accumsan, tellus et condimentum laoreet, lacus lorem consequat nisi, ac fermentum velit eros at metus. Aliquam lacinia mollis felis, vel pretium nulla condimentum consectetur. Quisque in mattis nibh. Nunc adipiscing tincidunt elit, vitae pellentesque felis molestie ac. Fusce vestibulum dui in nibh gravida ut placerat ligula porta. Ut sem lectus, condimentum nec tincidunt a, imperdiet vitae risus.</div>
My question is very basic and generic.
I am starting on designing a page(s) using div tags. now I am confuse with two approaches.
should I keep width and height of divs fixed (i.e. fixed with pixels) or
should I keep width and height of divs variable (i.e. using % instead of pixels).
I personally like the first approach where you fix everything and there is very little chance of anything getting disturbed at different screen resolution but the drawback is if screen resolution goes below my expected screen resolution then the scroll bars makes the site look bad(there may be more drawbacks but at present I am not remembering it :) ) , so in that case 2nd approach comes into the picture but the thing is once you start using % for your width and height its very difficult to design the page though once its designed its more stable.
I am confused with the two approaches and need inputs on the above two...
thanks in advance.
You answered your own question. The second approach is better in most of the situations, as it would fit all the screen resolutions nicely. Think of when somebody tries loading your page using a mobile phone, then using percentage will help.
And I don't think using percentage make it harder to design, I even think it's easier. For example, if you want to adjust the main table width to be 1/4 of the screen, now you only need to set width: 25% instead of setting (say) width: 250px; and guess if it works on this size of monitor or different sizes of monitor.
Imagine that you're currently working on a 17" laptop, and the width of your page layout is set fixedly 800px that would fit your screen at the moment. But when you run it on the 24" monitor, that layout will look like a paper on a desk.
With percentage, say, 70% would fit your 17" laptop and also, 24" monitor.
Here is a sample fluid HTML page for you to reference, try to see how it looks with percentages. Note that no matter you minimize the screen, the layout can still adjust. Just simply copy and paste, this is the point of designing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
html, body{
height:100%;
}
/* Backward Compatible for IE6 */
* html #container{
height:100%;
}
/* Top logo and bottom footer */
div#logo, div#footer {
max-width: 90%;
color:#000000; background-color:#ffffff;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Top navigation bar */
div#navbar {
max-width: 90%;
color:#ffffff; background-color:#124a9f;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Container for three lower boxes */
div#container {
max-width: 90%;
height:70%;
color:#000000; background-color:#ffffff;
margin-bottom:10px; margin-left:auto; margin-right:auto;
}
/* Main content (center box) */
div#main {
overflow:auto;
height: 100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#efecf8;
}
/* Full navigation menu (left box) */
div#leftcol {
float:left;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
/* Featured content (right box) */
div#rightcol {
float:right;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
</style>
</head>
<body>
<div id="logo">
Logo
</div>
<div id="navbar">
Navigation Bar
</div>
<div id="container">
<div id="leftcol">Left Column</div>
<div id="rightcol">Right Column</div>
<div id="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
</div>
</div>
<div id="footer">
©2011 Ideal Web Design Co.
</div>
</body>
</html>
It all depends on the layout and design of the website you are creating.
the 2nd approach is used in "fluid" layouts (websites that need to extend and take all the space available to them), otherwise you don't have other notable advantages vs. fixed layouts.
I recommend that you look at the statistics on screen resolutions provided by W3C here:
http://www.w3schools.com/browsers/browsers_display.asp
As you can see, 800x600 is almost gone, so focusing on 1024x768 and up will help.
I don't know how far you are into the learning process, but when you feel like taking a look at what most developers use, I recommend you visit the 960 grid system:
http://960.gs/
That's a question that really depends on what functionality will reside within those divs. If it needs to grow, then percentage is probably warranted. If not, then you should be ok with using px
I guess the 1st approach is better for 99% of the wepapps. You can look Blueprint css framework, is a very easy and clean way to use grid like layouts.