How to apply parent's parent width to relative positioned child div?

How to apply parent's parent width to relative positioned child div? - html

i created a small example: jsfiddle
When hovering over one of the red boxes i want the text to fill the complete 'row's' width, starting from the left border of the parent div and looking the same for all the boxes.
the text-height should later be animated
(edit: to clarify, each .ma-text should have the width of .contentaround, the first of each row already has the correct width and position)
.contentaround{
max-width: 80%;
border:1px solid black;
}
.ma{
min-height: 20px;
margin: 0px;
text-align: center;
border: 2px solid red;
display: inline-block;
width:23%;
}
.ma-text{
min-width: 100%;
width: 65vw;
max-width: 1050px;
text-align: left;
height: 0;
left: 0;
visibility: hidden;
opacity: 0;
box-sizing: border-box;
float:left;
}
.ma:hover .ma-text{
height: auto;
visibility: visible;
opacity: 1;
display: block;
}
<div class="contentaround">
<div class="ma ">
<div class="ma-icon">x</div>
<div class="ma-text">
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</div>
<div class="ma ">
<div class="ma-icon">x</div>
<div class="ma-text">
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</div>
<div class="ma ">
<div class="ma-icon">x</div>
<div class="ma-text">
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</div>
<div class="ma ">
<div class="ma-icon">x</div>
<div class="ma-text">
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</div>
<div class="ma ">
<div class="ma-icon">x</div>
<div class="ma-text">
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</div>
</div>

If the parent element has a relative position, the child element need only have width: 100% to have the width of the parent element.
.contentaround{
max-width: 80%;
}
.ma{
min-height: 20px;
margin: 0px;
text-align: center;
border: 2px solid red;
display: inline-block;
width:23%;
}
.ma-text{
min-width: 100%;
width: 65vw;
max-width: 1050px;
text-align: left;
height: 0;
left: 0;
visibility: hidden;
opacity: 0;
box-sizing: border-box;
float:left;
}
.ma:hover .ma-text{
height: auto;
width: 100%;
visibility: visible;
opacity: 1;
display: block;
}
<div class="contentaround">
<div class="ma ">
<div class="ma-icon">x</div>
<div class="ma-text">
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</div>
<div class="ma ">
<div class="ma-icon">x</div>
<div class="ma-text">
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</div>
</div>
JSFiddle: https://jsfiddle.net/vdoLw0yu/25/

Related

How to set the center alignment for an image in a column and have the text appear below it?

How to set the center alignment for an image in a column and have the text appear below it?
div.col_text {
columns: 2;
}
div img {
width: 120px;
height: 120px;
border: 1px solid black;
background-color: black;
}
<div class="col_text">
<img/>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

You can give it: margin: 0 auto, and display:block
display:block sets it to a block, so the content is forced below it.
margin: 0 auto sets the top and bottom margin to 0 and left and right to auto which will center.
div.col_text {
columns: 2;
}
div img {
width: 120px;
height: 120px;
border: 1px solid black;
background-color: black;
margin:0 auto;
display:block
}
<div class="col_text">
<img/>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>

How to wrap text around an img in CSS?

In HTML I have:
<section>
<h2>Title here</h2>
<article>
<div class = "image">
<img alt = "image title" src = "image location" height = "300" width = "231">
</div>
<h3> text that needs to be wrapped here</h3>
<p> here too</p>
</article>
</section>
How would I code this in CSS to wrap around the image?

Your image needs to float so the text and can wrap around, we are all telling you this.
If the text has to wrap around a non-rectangular shape, shape-outside can be used too .
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
Example with a rounded image
div.image img {
float: left;
border-radius: 50%;
shape-outside: ellipse(160px 100px);
border:solid;
}
h3,p {margin:0;}
<section>
<h2>Title here</h2>
<article>
<div class="image">
<img alt=" title" src="http://dummyimage.com/300x200/e3de88&text=shape-outside">
</div>
<h3> text that needs to be wrapped here</h3>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
</article>
</section>
Here is some other example where the text can be layed inside fancy & complexe shapes: https://css-challenges.com/custom-text-shape/ & the pen that goes along https://codepen.io/t_afif/pen/eYpeOXB

.image{
float:left;
width:30%;
margin-right:10px;
}
.image img {
display:block;
width:100%;
height:100px
}
<section>
<h2>Title here</h2>
<article>
<div>
<div class="image">
<img s src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg" >
</div>
<div>
<h3> text that needs to be wrapped here</h3>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</article>
</section>

Wrapping table content around a floating div across multiple rows

Part-way down my page I have a table with two columns and multiple rows, each containing varying amounts of dynamically generated text.
I would like to float a div (of fixed size) so that it spans as many rows of the second column as may be necessary from the top-right corner, with lines of text wrapping around it as required.
So if, for example, the bottom of the div is half-way down the third row, the text in that row should wrap around the left and bottom edges of the div.
I hope this makes sense. Can anyone please help?

I don't believe that would be a correct usage of table element. To solve your problem it will be better to use div or p elements. If you float right the red element, those that follow will wrap around it. If you want to use table you may consider using third column or position absolute div next to the table.
p {
margin: 0;
padding: 10px;
}
#wrapper {
width: 500px;
}
.row {
position: relative;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
.row:last-child {
border-bottom: 2px solid #000;
}
#table p:first-child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 20%;
padding: 2%;
border-right: 2px solid #000;
}
#table p:nth-child(2) {
margin: 0 0 0 24%;
width: 71%;
}
#rightColumn {
border: 2px solid #000;
position: relative;
z-index: 1;
float: right;
background: #ff0000;
width: 20%;
margin: 0 0 2px 2px;
}
<div id="wrapper">
<div id="rightColumn">
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
<div id="table">
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
</div>
</div>

How can I make my text wrap around my image?

In my website, I have a page like this:
<div style="float:left; width: 75%; padding:15px 0px 0px 0px;">
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
</div>
<img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;>
As you can see,I've tried floating my image right and my text left as all the other suggested questions prompted, but that doesn't seem to make it wrap around.
Also, I want to make it appear like this on mobile:
HEADING
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT
etc...
IMAGE
What else can I do to achieve this?
NOTE: I am aware how much you guys hate inline css lmao. It's just that I'm in such a situation that I must do so. It's hard to explain. :/
EDIT:
I used the code provided in the answers:
<div style="width: 75%;padding:15px 0px 0px 0px;">
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;" />
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
This works fine on the PC view, but viewing it on mobile is a whole different story... the text doesn't wrap around the image at all... how can I fix that?

Put your image at the top most point where you want text to wrap it.
It also mus be in its container
another note you where missing " /> from your img
you also didn't end your <p> tags correctly </p>
<div style="width: 75%;padding:15px 0px 0px 0px;">
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;" />
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
update on request
Here is how you get your image to sit at the bottom of your text even although its at the top when in mobile
div {
width: 75%;
padding: 15px 0px 0px 0px;
display: table;
}
img {
width: 25%;
min-width: 200px;
display: table-footer-group;
}
p,
h1,
h3 {
display: table-caption;
}
<div>
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<img src="http://dummyimage.com/300x300/000/fff" />
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>

Put your image at first and also you mess close bracket / in your image tag.
<img src="http://dummyimage.com/300x300/000/fff" style="float:right;
width:25%; min-width:200px;" />

Coloring even heighten columns

I try to set different a background colors for left and right columns and to maintain the same height.
So I set a background color for outer wrapper ("container" div) so it will set a color to rightBar.
But this didn't work.
Online Demo
I want it to work on all browsers.
Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div class="contentcontainer">
<div class="container">
<div class="mainBar">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
<div class="rightBar">
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body
{
font-family: Verdana,Tahoma,Arial, "Trebuchet MS" ,Sans-Serif,Georgia,Courier, "Times New Roman" ,Serif;
margin: 0px;
padding: 0px;
background: repeat-x scroll center bottom #C4DAE9;
text-align:center;
}
.contentcontainer
{
}
.container
{
margin-left: auto;
margin-right: auto;
margin-top:5px;
width: 99%;
text-align: left;
background-color:Gray;
clear:both;
}
.mainBar
{
width:70%;
float:left;
background-color:White;
}
.rightBar
{
width:30%;
float:left;
}

By floating your two inner Bars, you take them out of the normal document flow. The result is that the containing box container effectively has no content and no height.
By adding a overflow:hidden to .container you can solve that problem, but then you will run into problems if the right bar is higher than the left bar.
I also think that in order for it to work in IE6, you might need to add a zoom:1 to .container but you'll have to try that.

You have to clear the floats at end of the container. One of the ways is:
...
<div class="rightBar">
...
</div>
<br style="clear: both;">
</div>

.rightBar
{
width:30%;
float:left;
height: 100%;
background-color: red;
}
also set the height of the parent element "container" to what ever...

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to apply parent's parent width to relative positioned child div? - html

Related

How to set the center alignment for an image in a column and have the text appear below it?

How to wrap text around an img in CSS?

Wrapping table content around a floating div across multiple rows

How can I make my text wrap around my image?

Coloring even heighten columns

Categories

Resources