I'm trying style a 2-col div with an image the width of one column in the first column, using the CSS3 property column-count. For browsers that CAN handle CSS3, it should look like this:
img col
col col
col col
col col
However, for browsers that cannot read the CSS, instead of having the image stuck in the top left with the text starting on the next line, I want it floating, like this:
img texttextte
xttexttexttext
texttetexttext
Currently, I have this for the image in question, which lays out exactly what I want for browsers that CAN'T support CSS3:
display: inline;
float: left;
-webkit-column-span: in-column;
-moz-column-span: in-column;
But for browsers that can support it, it appears like this, with the image taking up a column all to itself:
img col col
col col
col col
col col
...which is not what I want at all. How do I get that image to float, with or without columns?
EDIT:
Here is the HTML:
<div id="content">
<h2>Title here</h2>
<img src="/static/images/img01.jpg" width="200" height="152" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam porttitor urna sit amet est pulvinar congue. Integer
lacinia dictum enim, non molestie turpis volutpat et. Praesent
pretium accumsan sapien, porttitor rhoncus augue porta ac.
Quisque fermentum enim quis magna condimentum a lobortis urna
accumsan. Integer viverra tristique turpis, sed fermentum
lorem hendrerit vitae.</p>
</div>
Here is the not-quite-working CSS so far:
#content {
width: 600px;
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-gap: 18px;
-webkit-column-gap: 18px;
}
#content img {
display: inline;
float: left;
-webkit-column-span: in-column;
-moz-column-span: in-column;
}
I feel like a floating, inline image shouldn't behave that way in a column.
You could try this...
<img src="/static/images/img01.jpg" width="200" height="152" style="float: left;"/>
...as an inline style (better still as a class in an external style sheet) or with the good old align attribute ...
<img align="left" src="/static/images/img01.jpg" width="200" height="152" />
...I hope this helps.
You can just put the image in the p tag. Your size for the columns and the image you have preset so you're good. I've done this no problem, the only thing you can't do is have the image span multiple columns.
Related
I have an HTML component that has an image floating to the left and text on the right. When the text's height is larger than the image, the text will wrap to the left. I want to add some padding between the image and the wrapped text. I could add a bottom padding to the image, but I don't want the padding to show up when the text is not wrapped. Here is what the component should look like when the text is no wrapped. The image should not have a bottom padding:
Here is what it should look like when the text is wrapped. There should be some padding between the image and the wrapped text:
Is there a way to do this through css?
An idea in case the image height is fixed or known:
.container {
border:2px solid;
min-height:200px; /* same as image height */
font-size:19px;
}
.container img {
float:left;
margin:0 20px 20px 0;
}
<div class="container">
<img src="https://picsum.photos/id/1014/200/200" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum quis mi vitae molestie. Sed scelerisque fringilla interdum. Duis ac purus nisl. Nulla vehicula vehicula turpis id convallis. Etiam nec nisl nibh. Mauris lorem mauris, vehicula nec massa in, accumsan egestas eros. Integer vehicula nulla sed enim laoreet maximus. Vestibulum at interdum sem. Sed interdum volutpat massa,
</div>
Yes, you can do it. Follow this example for HTML and css.
body {
margin: 20px;
text-align: center;
}
img {
float: left;
margin: 0px 10px 5px 10px;
}
p {
text-align: justify;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Wraping an Image with the text
</title>
</head>
<body>
<div class="square">
<div>
<img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1024px-Image_created_with_a_mobile_phone.png" alt="Longtail boat in Thailand" width="300px">
</div>
<p>
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor. It is a
good platform to learn programming. It is an
educational website. Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course.
</p>
</div>
</body>
</html>
I am trying to make the text appear below the image but it is not budging at all. My goal is it make the text appear below the image in the container
.left-col p {
text-align: justify;
width: 300px;
}
.left-col img {
margin: 0 auto;
left: 5%;
width: 300px;
height: 130px;
position: absolute;
text-align: center;
}
</head>
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium
</p>
Instead of using position absolute, remove it. Reason is that the element is positioned relative to its first positioned (not static) ancestor element. So, you could of course mess with top, right and left values to make it work but it would not be responsive at all.
Read more about it here: MDN Position CSS
The default value of position is static, this way the elements renders in a specific order(its what you want, render img and p after).
This is the pen if you need:
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="https://via.placeholder.com/200x150" width="200" height="150" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</div>
</div>
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
width:300px;
height: 130px;
}
Also, instead of setting width 300px to paragraph and img, you could set only one time to your .left-col div. I have also removed other properties that you were not using.
another note is that you forgot the " on height attribute.
In css there is use [ position absolute ] For the image and is not used in the text You must set the position in the image and the text or leave it to the default setting I deleted it from the image properties in css
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
margin: 0 auto;
left: 5%;
width:300px;
height: 130px;
text-align:center;
}
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</body>
Remove the line 'position: absolute;' from CSS. Complete (close) the DIV and P tags. You may introduce '.container{...}' where you may position (or whatever) the image-and-text together. You may wish to use 'margin: 0;' to glue the text to the image. Good luck!
I am trying to create a website template and I have 3 divs that I have sized equally and when I edit it on codepen using my laptop, it looks perfectly centered, but when I use my monitor( which is a much larger screen) the divs all shift to one side. How do I make my divs responsive to a change in screen widths. In this case, I want my divs to all come together in the middle of the page if the screen is wide, but if it is a laptop screen I want the div's to fill the space.
Here is a codepen to show you what it looks like now: https://codepen.io/chenius/pen/eKvRKp/
snippet of code for one of the divs:
.post1{
position: absolute;
width: 392px;
height: 500px;
background-color: #F1F0F0;
margin-top: 50px;
margin-left: 40px;
}
If you add a codepen try to include your problem only. I've update your codepen.
If you try to make a responsive design don't use px as a size. If you try to style all blocks with position absolute you don't have controll in your CSS.
Try using display: flex combined with a % width and maybe a max-width depending on your style preferences
#bodyposts {
background-color: white;
width: 100%;
display: flex;
justify-content: center;
/*border: 1px solid black;*/
}
.post {
width: calc(100% / 3);
max-width: 368px;
}
<div id="bodyposts">
<div class="post1 post">
<img src="https://photos-5.dropbox.com/t/2/AACOIvsj9S-Od_SOp3CrZNZD9a2-vgB9txeSuP95IDvWhA/12/731836158/jpeg/32x32/1/_/1/2/1-1.jpg/ELC5uLQIGA4gBygH/CN4xmVMBYozkdoVkY_yXluv4Yao68hgbv0V95K7Tjy4?size=2048x1536&size_mode=3" id="post1img"/>
<p class="text-success">Bootstrap V3.3.6</p>
<p id="post1para">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.</p>
<div class="text-center"><button type="button" class="btn btn-success">Button Green</button></div>
</div>
<div id="post2" class="post">
<img src="https://photos-3.dropbox.com/t/2/AAA0wm6tg1X1K7zHZG5l6nZGnfHWobZLJTB4L12PBjLRhQ/12/731836158/jpeg/32x32/1/_/1/2/1-2.jpg/ELC5uLQIGA8gBygH/simGKuHsNbmiQz63msz6lnpI4VntyYBKZScXTOh08PY?size=1280x960&size_mode=3" id="post2img"/><h3 class="text-primary">Responsive Desgn</h3>
<p id="post2para">Conquer Template is provided by templatemo for free of charge. You can use this template for any kind of website. No credit link is required. All images by Unsplash. Thank you for visiting our website. Please come again!</p>
<button type="button" class="btn btn-primary">Button Blue</button>
</div>
<div id="post3" class="post">
<img src="https://photos-2.dropbox.com/t/2/AABT_1USaAxiBj120M9ai5jS-hYbSHGkRn0yDJhQeC4rNg/12/731836158/jpeg/32x32/1/_/1/2/1-3.jpg/ELC5uLQIGA8gBygH/APtdBotAnn4vJycbaWyxY84b1TmaxKy3x2JChb8NLOE?size=1280x960&size_mode=3" id="post3img"><h3 id="post3h3">Parallax Scroll</h3>
<p id="post3para">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.</p>
<button type="button" class="btn btn-secondary">See Details </button>
</div>
</div>
This will position the blocks according to your preferences. You can update this on your original file. See how I also add a className to your div so you can style way faster.
I see that you're using some Bootstrap classes. Would it be easier to use the Bootstrap grid to make it easier? Maybe try using the class of col-sm-4 for 3 columns to make it responsive. If not Bootstrap, I use 3 divs and float them to the left with a width of 33.3% or 33% if you want spacing then use a media query to break it into a 50% div and then a 100%.
Also I would try to target the same class to prevent writing repetitive CSS for those columns
You could try the Responsive Web Design Grid , similar to #Trace751 suggestion of Bootstrap.
I'm making myself a website but I'm a little stuck on an issue I am having.
Inside a div I have a block of text with variable height.
At the right side of the text I want to position an image width a variable width & height. It has to be aligned to the bottom
Above the image may not come any text.
It needs to be like this: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg
Here is the code I'm currently having:
HTML:
<div id="section">
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
</p>
</div>
CSS
#section {
position: relative;
}
#image {
float: right;
margin-left: 20px;
position: absolute;
bottom: o;
right: 0;
}
With this code the image is aligned to the bottom right corner of the div, but the height of the div is lower then the height of the image.
Also the text just goes through the image.
you need a couple of things to fix this.
1) add padding-right to the section so it does not overlap with the image.
#section {
position: relative;
padding-right:<at least image width so the text doesn't overlap>
}
2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<div style="clear:both"></div>
</div>
Here is a working solution: http://jsfiddle.net/zV3wm/
I can think of a way with variable image widths and text amounts, but it requires some duplication in the markup.
The gist is that you right-float a hidden version of the image, and then use overflow:hidden so that the paragraph against the float doesn't flow under it. Then, we use absolute positioning to place the non-hidden version of the image at the bottom of the container.
I have prepared a mockup at http://jsfiddle.net/UmGNZ/ (I have given the hidden image partial opacity, so you can see where it's being added to the document), but for a pseudo-HTML example:
<container with position:relative>
<right-float>
<hidden img tag with opacity: 0 />
<actual img tag with absolute positioning, bottom: 0, right: 0 />
</right-float>
<p with overflow:hidden (or auto) />
</container>
You could also try a pure CSS solution using CSS tables if you don't have to support IE7, but otherwise this should work down to IE6 if you use visibility:hidden in favour of opacity, and add a zoom:1 to the paragraph style.
This idea which allows a flexible image size: http://jsfiddle.net/David_Knowles/F3zZU/4/
.cell {display:table-cell;}
#section {
position: relative;
width:300px;
}
#image {
vertical-align: bottom;
}
<div id="section">
<div class="cell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
</div>
<div id="image" class="cell">
<img src="http://placeimg.com/120/80/any" alt="image"/>
</div>
</div>
I dont thing I am correct but you can achieve that by float right and margin-top.
#img {
float: right;
margin-top: -140px;
}
Check this out: http://jsfiddle.net/wrujx/
I think best solution is to use a little bit of jQuery (JavaScript) and let each part do its job keeping it as simple as possible. Here's what you'd have:
HTML
<div id="wrapper">
<p>yourtexthere</p>
<img src="whatever.jpg"/>
</div>
CSS
#wrapper{
width:600px;
border:1px solid #000000;
}
p{
display:inline-block;
margin-right:20px;
}
img{
vertical-align:bottom;
}
jQuery
var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)
And there you go plain and simple without extra tags and messy positioning.
I have an issue with float and have included the sample code below. I am trying to create a two column layout: I know how to do this a number of other ways so this question is with a view to finding out why FLOAT behaves the way it does here.
The container DIV has two DIVs, both are floated left.
As expected, the size of the browser window determines whether or not the second floated block level element will go alongside or under the first floated element.
The problem arises with the length of the content in the second floated DIV (assume the browser window is maximized, at whatever resolution).
In the code below, I have commented out part of the second paragraph. On my browser this is the cut off mark: including any content after this causes the whole DIV to clear the first DIV, even though there is a lot of space left in the second DIV before it should need to clear the first DIV.
I cannot see anything in the code that should cause this to happen. I am aware of how float behaves in terms of block level and inline content and the consequences of placing non-floated blocks beside floated ones, but I cannot find anything in the documentation to explain why the block should clear when there seems to be sufficient room for its content.
Help much appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Float Problem</title>
<style>
body {
background:#5c604e;
}
#container {
position:relative;
background:yellow;
}
p {
background-color:#cccccc;
width:50%;
}
.block {
width: 200px;
height: 200px;
}
.float {
float: left;
}
.pink {
background: #ee3e64;
}
.blue {
background: #44accf;
}
</style>
</head>
<body>
<div id="container">
<div class="block pink float">Lorem ipsum dolor sit amet consectetuer Nam fringilla Vestibulum massa nisl. Nulla adipiscing ut urna ipsum Curabitur urna lacinia pretium feugiat Ut.
</div>
<div class="blue float"> <h2>Test Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum erat a neque eleifend vitae ultrices nisi tempor. Praesent facilisis lobortis nisl, <!--sit amet gravida orci mollis vitae. Maecenas porta turpis id urna porta id ornare velit dapibus. <!-- Proin sollicitudin, tortor viverra posuere mattis, nisl est rhoncus urna, nec elementum augue turpis vitae diam. Pellentesque ut quam sit amet elit tempus suscipit nec vel nulla. Proin ullamcorper sollicitudin metus in posuere. Aliquam a vehicula odio. Morbi scelerisque arcu ac nibh cursus ullamcorper. Aliquam pulvinar commodo nunc nec laoreet. -->
</p>
</div>
</div><!--end of container div -->
</body>
</html>
See it at http://cssdesk.com/86cPH
In your example, you have two block-level element floated next to each-other. Because they're block-level, they establish a new containing context in which their contents will live and affect layout.
The standard behaviour when calculating box sizes for floated elements is to base it on the contents of the element. Because your second floated box doesn't have an explicit width, the browser determines that its width should be based on its contents, which in the case of the floated element is going to be as wide as its contents can feasibly be.
Thus, the second box flows underneath the first because the intrinsic width of the paragraph affects the blue box, which is larger than the allotted explicit constraints of its container (i.e., the width of #container minus the width of the first floated element).
If you wanted the text to flow around the floated element, you should omit the "blue" box. Only when the float and the contents are nested in the same container (and the content isn't a block-level element) will the content then flow around the pink box as one might expect.
As far as getting a working two-column layout with equal-height columns, I'd recommend trying display: table if you don't need to support IE7.
What you want to achieve? you haven't fixed the width of second block and so its width is going mad with the content length.
Give it a fixed width.
If you want that rest width is covered by it then try this.
.block1 {
width:20%;
}
.block2 {
width:80%;
}
and in html
<div class="block1 pink float"> ..content.. </div><
div class="block2 blue float"> ..whatever content.. </div>
remember there should be no space between closing div of left block and opening div of right block else whitespace between them will cause them to stacked over one another