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!
Related
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 16 days ago.
I am trying to make a listing website. I am using the Jekyll Moonwalk theme as a base and heavily adapting it to my needs.
This is my first website project, so I am figuring it out as I go. Right now, I am trying to make my HTML button elements "pin" to the bottom of their container, instead of being at the bottom of the text, so they all are in line. Right now it looks like this:
Image
The red line is roughly where I want the bottom of all the buttons to me.
I have tried ChatGPT's suggestion, but it didn't work.
<div style="position: relative;">
<button style="position: absolute; bottom: 0;">Click Me</button>
</div>
You can use display flex for the boxes to arrange them like this, justify the content using space-between will always keep the buttons at the end.
here box is your card
.box{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 280px;
height: 320px;
border: 1px solid #000000;
}
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor egestas sem.
</p>
</div>
<div class"bottom">
<!--button-->
<button> Tell me more</button>
</div>
</div>
style parent div of button position:relative
syle button position: absolute; bottom:0
.container{
display:flex;
}
.box{
position:relative;
outline: 1px solid black;
height: 300px;
margin:5px;
padding:5px;
display:flex;
flex-direction: column;
align-items: center;
}
button{
position:absolute;
bottom: 10px
}
<div class="container">
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor
egestas sem.
</p>
</div>
<div class"bottom">
<!--button-->
<button> Tell me more</button>
</div>
</div>
<div class="box">
<div class="head">
<!--header content-->
<h1> hello</h1>
</div>
<div class="body">
<!--bodycontent-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
libero nec nunc consectetur, non euismod ex vestibulum. Aliquam porttitor
egestas sem.
</p>
</div>
<!--button-->
<button> Tell me more</button>
</div>
</div>
My question is principally similar to this one: SVG img on the same line of text in inline-block container
I have a SVG image, which I want to build into the text, which "displaces" the text from the left side. The text is at least two lines long and it's a <h1> if it matters.
What I've tried to far:
Set the height and/or width just like in that question
Wrapping it in a paragraph (<p>)
Wrapping it in a div with a specified width and/or height
According to https://stackoverflow.com/a/64892423 I tried to add justify-self: start; - has no effect as well...
How do I solve this primitive problem? Help is appreciated.
<div class=company-content>
<p>
<div style="width:10%; height:10%; display:inline-grid;">
<img src="graphics/filenamehere.svg" style=" display:inline-flex; height:3rem;" />
</div>
<h1>Lorem Ipsum Text here</h1>
</p>
UPDATE
Minimal reproducable example:
/* Add a random picture */
var img = document.createElement('img');
img.src = 'https://unsplash.it/200/300/?random';
document.body.appendChild(img);
/* Add some lorem ipsum text next to the picture */
var lorem = document.createElement('div');
lorem.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nunc eget euismod tincidunt, nunc nisi tincidunt augue, nec consectetur nunc nisi eu nunc. Nullam eget nunc eu nisl sagittis porttitor. Nullam euismod, nunc eget euismod tincidunt, nunc nisi tincidunt augue, nec consectetur nunc nisi eu nunc. Nullam eget nunc eu nisl sagittis porttitor.';
document.body.appendChild(lorem);
/* Make the picture sit on the left side of the text inline with the text */
img.style.float = 'left';
/* Make the text a h1 header */
lorem.style.fontSize = '1.5em';
lorem.style.fontWeight = 'bold';
This works, but not in my code, which uses a h1 tag...
UPDATE 2
My not properly working code:
.company-content {
width: 79%;
display: inline-grid;
/*margin-left: 75px;*/
}
<div class=company-content>
<p>
<div style="width:10%; height:10%; display:inline-grid; float:left;"><img src="https://picsum.photos/500" style=" display:flex; width:3rem; height:3rem; align-items:center; float:left;" /> </div>Lorem Ipsum blablabla bla bla bla bla</p>
Use this code for image and text same line for your requirement.
<div class=company-content>
<p>
<div style="width:60%; height:10%; display:flex; align-items: center; justify-content: center;
margin: 0 auto;">
<img src="graphics/filenamehere.svg" />
<h1 style="margin: 0;">Lorem Ipsum Text here</h1>
</div>
</p>
</div>
This is what I am currently working on...
.scake_one {
color: #cc3300;
display: inline-block;
}
.scake_two {
color: #cc3300;
display: inline-block;
}
.scake_three {
color: #cc3300;
display: inline-block;
}
<div class="scake_one">
<h1>CAKE ONE</h1>
<p>Lorem ipsum etiam porttitor ultrices
<br>tortor tempus vehicula.</p>
</div>
<div class="scake_two">
<h1>CAKE TWO</h1>
<p>Lorem ipsum eu quisque velit
<br>quam convallis massa tellus.</p>
</div>
<div class="scake_three">
<h1>CAKE THREE</h1>
<p>Lorem ipsum sed mauris aenean
<br>pretium pulvinar.</p>
</div>
I was able to use this property well with an other section that had < h1 > and < li > elements. I was able to used inline-block because they are block level elements? I saw this info on the w3 site
http://www.w3schools.com/htmL/html_blocks.aspI also saw that < div > tags are also block level elements. I can't seem to understand why it isn't working.
Here you go! You need float-left, and the width needs to tell it to take up a third of the screen.
Also, just as a style thing, you can give all of your "scake" the same class name, because the CSS styling is the same for each one. Then if you change the style on one, it'll update it for all of them.
.scake {
color: #cc3300;
display: inline-block;
float: left;
max-width: 32%;
margin-left: .5%;
margin-right: .5%;
}
<div class="scake">
<h1>CAKE ONE</h1>
<p>Lorem ipsum etiam porttitor ultrices
<br>tortor tempus vehicula.</p>
</div>
<div class="scake">
<h1>CAKE TWO</h1>
<p>Lorem ipsum eu quisque velit
<br>quam convallis massa tellus.</p>
</div>
<div class="scake">
<h1>CAKE THREE</h1>
<p>Lorem ipsum sed mauris aenean
<br>pretium pulvinar.</p>
</div>
I'm using Zurb Foundation with Sass Compass, but this could a problem for anything in css.
So, I have code like this
<div class="row">
<div class="small-6 column">...</div>
<div class="small-6 column">...</div>
</div>
The columns have content of differing height determined by how much text and images I want to put in there. The row has no explicit height and determined by the height of the tallest column. Now the tallest column will be shown as is, but the other one which is shorter, I'd like it's content to be centered vertically. I have looked around for this and I've tried using display: table and relative positioning, but none of them offers what I need.
Wrap the vertical aligned text in a div with the same height as its parent and display:table-cell it (after displaying its parent as a table):
HTML
<div class="row">
<div class="small-6 column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et iaculis justo. Mauris bibendum convallis est, vel blandit quam tempor aliquet. Cras euismod nibh et nisl congue, eget tincidunt mauris consectetur. Donec eu risus lectus. Integer at ipsum sed turpis fringilla adipiscing vitae vel enim.</div>
<div class="small-6 column"><div class="v_align">Some text</div></div>
<div class="clear"></div>
</div>
<div style="width:200px; height:100px; background:#0f0; color:#fff;">dfbvd bdfhgf hfg hghf gfdh hfgghfd hgf</div>
CSS
.row{
width:300px;
height:auto;
}
.clear{clear:both;}
.column:first-child{
color:#f00;
background:#ccc;
}
.column:nth-child(2){
background:#999;
color:#00f;
display:table;
}
.column{
width:150px;
float:left;
}
.v_align{
display:table-cell;
vertical-align:middle;
}
JS
$(document).ready(function(){
var rowHeight = $(".row").height();
console.log(rowHeight);
$(".column").height(rowHeight);
$(".v_align").height(rowHeight);
});
Check the result: http://jsfiddle.net/gespinha/h6aPf/6/
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.