I want to wrap the contents of a div around another sibling div (NOT a nested DIV)
The code example below comes very close. But what I need is for the contents of the DIV on the left so slide down enough to allow a few lines of the content of the right DIV to flow over the top (as it does on the bottom)
Here is full working HTML doc that demonstrates what is working so far, except for the text flowing on the top.
div.wrapper {
width: 500px;
}
div.Cover {
float: left;
width: 250px;
height: 350px;
margin: 10px;
padding: 10px;
border: 3px solid orange;
background-color: aqua;
}
div.Content {
padding: 5px;
}
<div class="wrapper">
<div class="Cover"></div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">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>
<div class="Content">text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text</div>
<div class="Content">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>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text</div>
</div>
If an html solution is enough, just position that div under a few Content divs in the html.
Before:
<div class="Cover"></div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
After:
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Cover"></div>
I'm not sure there is a css solution. Margin-top, top, both clear the space but don't allow floated elements past.
This just means that floated div is relative to the text content, not to the page.
What I think you really want, but can't use yet, are CSS Exclusions: https://www.w3.org/TR/css3-exclusions/. They're only supported in IE/Edge as of this writing, and only with the -ms prefix.
This article shows some practical examples: http://www.html5rocks.com/en/tutorials/regions/adobe/.
If you're able to paste this somewhere, anywhere after the html, this accomplishes the same thing using javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('.wrapper').prepend($('.Content:nth-of-type(2)'))
</script>
Related
I am trying to make it so one <div> is on the same line/row another <div> by default they just appear below each other. I have found out that this only happens when the text is multiple lines. Here is the code:
h1 {
text-align: center;
}
h2 {
text-align: left;
}
.info {
text-align: left;
font-size: 20px;
float: right;
}
.content {
align-self: auto;
border: 1px solid black;
color: gray;
width: 150px;
max-width: 150px;
float: left;
}
.p1 {
text-align: left;
margin-left: 10px;
}
<h1>Good Health and Well being</h1>
<div class='info'>
<h2><b>What do good health and well-being mean?</b></h2>
<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</p>
<h2><b>Why are good health and well-being so important?</b></h2>
<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</p>
<h2><b>How do you keep good health?</b></h2>
<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</p>
</div>
<div class='content'>
<h1>Content</h1>
<p class='p1'>content</p>
</div>
Here is an image of it.
And here is an image when the text doesn't use multiple lines:
Lastly here is an image of what i want
Reason this is happening is because that having multilines increases the width of your info div. It keeps on adjusting till it becomes (100%-150px) 150 being the width of your content div. Adding width to info will solve the issue , add the width such to give margin in between as I have updated the css.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
.info {
text-align: left;
font-size: 20px;
float: right;
width: calc(100% - 200px)
}
.content {
align-self: auto;
border: 1px solid black;
color: gray;
width: 150px;
max-width: 150px;
float: left;
}
.p1 {
text-align: left;
margin-left: 10px;
}
<h1>Good Health and Well being</h1>
<div class='info'>
<h2><b>What do good health and well-being mean?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
<h2><b>Why are good health and well-being so important?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEX </p>
<h2><b>How do you keep good health?</b></h2>
<p>T TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
</div>
<div class='content'>
<h1>Content</h1>
<p class='p1'>content</p>
</div>
The div element is a block level element, but there is a way you can bypass that while styling it through css.
Firstly, you'd give the divs the same id attribute since they have different classes. Then through the css file you could add the float attribute, whose values can be either left or right.
So it could look something like this
<h1>Good Health and Well being</h1>
<div class='info' id="box">
<h2><b>What do good health and well-being mean?</b></h2>
<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</p>
<h2><b>Why are good health and well-being so important?</b></h2>
<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</p>
<h2><b>How do you keep good health?</b></h2>
<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</p>
</div>
<div class='content' id="box">
<h1>Content</h1>
<p class='p1'>content</p>
</div>
#box {
float: left;
}
Playing around with the size (width and height) of each individual div can help you make them fit nicely. Or an alternative is using the position attribute, but I find using float much less of a pain.
There are multiple ways you can inline div's side by side. Using float can be tricky and will require clearing of div elements to stack properly.
There are some good new properties of CSS for setting Grids of elements. One in the example below is using the flex property on the parent container of both div's you want to be side by side. There is another CSS style property grid, which can be a little difficult to understand at first but its best when you get used to it.
<!DOCTYPE html>
<html>
<body>
<style>
.flex {
display: inline-flex;
flex-flow: nowrap;
justify-content: space-between;
}
.info,.content {
width: 49%;
}
.content{
background: lightgray;
padding: 1rem
}
</style>
<div class="flex">
<div class='info'>
<h2>
<b>What do good health and well-being mean?</b>
</h2>
<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</p>
<h2>
<b>Why are good health and well-being so important?</b>
</h2>
<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</p>
<h2>
<b>How do you keep good health?</b>
</h2>
<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</p>
</div>
<div class='content'>
<h1>Content</h1>
<p class='p1'>content</p>
</div>
</div>
</body>
</html>
Hope this helps you.
I have a symbol from other font-family and need to adjust its size. Unfortunately font-size:200% increase line-height of whole line;
How to increase one character font-size without increasing line-height?
I know about "severing" the character with position:absolute but this also shift text horizontally. When what I want is something line line-height: inherit (which doesn't work).
.increased {
font-size:200%
}
<p>normal</p>
<div style="background-color:yellow">.text text text text text text 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>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text 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>
If you're sure that it won't be the only character in that line, you can use line-height: 0. Otherwise you would have to manually adjust line-height value.
.increased {
font-size: 200%;
line-height: 0
}
<p>normal</p>
<div style="background-color:yellow">.text text text text text text 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>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text 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>
Make the element inline-block then you can adjust the line-height of only that character:
.increased {
font-size:200%;
line-height:0.2;
display:inline-block;
}
<p>normal</p>
<div style="background-color:yellow">.text text text text text text 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>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text 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>
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 7 years ago.
I am making a webpage with 2 divs in a div, but the 2 smaller divs aren't lining up, here is an example:
Here is my HTML:
<div id = "creators" class = "big-part">
<h3>Creators</h3>
<div class = "creator_name">
<h4>FlipFloop</h4>
<p>text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text texttext 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 = "creator_name">
<h4>TickTock</h4>
<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</p>
</div>
<!--<div class = "creator_name">
<h4>Name</h4>
<p>Text</p>
</div>-->
</div>
and my CSS:
.creator_name {
width: 35%;
display: inline-block;
margin: 2% 2%;
}
when I use float: left :
try this:
.creator_name {
vertical-align:top;
}
jsfiddle link click here
I've recreated the issue I am having here:
https://jsfiddle.net/9p4z8fnj/
.youtube_text_infor {
margin-right: /**/
}
.youtube_video {
padding-right: 10px;
}
<div class="youtube_video"><p style="float: left;"><iframe width="300" height="200" src="https://www.youtube.com/embed/293ZfGilg-I" frameborder="0" allowfullscreen></iframe></p>
</div>
<p class="youtube_text_infor"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text</p>
<div style="clear: left;">
My goal is to add some white space (padding) from the youtube embedded link such that there will be a gentle gap between the text and the video.
I've tried toying with the padding and the margin with both the text and the embedded link, with no avail.
Any Help would be appreciated.
You need to add this css in your style
.youtube_video {
padding-right: 10px;
float: left;
}
I am attempting to design a responsive layout in which there is an image and a paragraph side by side and the image is vertically aligned with the text (the paragraph height changes with adjustments to the browser width).
Here is my currant code,
http://jsfiddle.net/xSrpt/
I have tried using
vertical-align:middle;
and
vertical-align:central;
on the parent div (#intro) and have not been able to get anywhere with it.
I feel like this should be an easy fix and i am missing something but hopefully you guys can help.
please include a working fiddle with your answer.
Thanks a lot!
Just to add a comment to above answer ( rep too low ).
It is unnecessary to convert the div into table.
All you have to do is applying vertical-align:middle to child element and not the parent.
#intro > * { vertical-align:middle }
Here's your forked fiddle.
http://jsfiddle.net/UBD6S/
much simpler solution.
try add to its parent - display:table-cell;
edit:
you need to make the div "act" like a table, as below:
CSS:
#intro{
display:table; /** table **/
width:90%;
background-color: #999;
padding:5%;
}
#pic{
height:100%;
width:80px;
background:black;
display:table-cell; /** table-cell **/
vertical-align:middle;
}
#your_pic {
width:80px;
height:80px;
background:#fff;
}
#p{
display:inline-block;
width:80%;
}
HTML:
<div id="intro">
<div id="pic"><div id="your_pic"></div></div>
<p id="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 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 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>