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
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>
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>
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;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to make a two column layout using DIVs, where right column will have 50% width and the left one would take 50% too.
How can I do that?
Demo
html
<div class="div1">Left div</div>
<div class="div2">Right div</div>
css
body, html {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
.div1 {
width: 50%;
float: left;
background: #ccc;
height: 100%;
}
.div2 {
width: 50%;
float: right;
background: #aaa;
height: 100%;
}
There are a large number of ways, without knowing what you've attempted, what your requirements are, what will work for you and what wont its a bit of a shot in the dark - but I'll give you a high level example of a number of techniques.
Use inline elements with 50% width, they will next against one another horizontally
Float two elements with width 50%, they will nest horizontally
Use CSS3 columns
Use CSS tables with two table cells, one for each column
I would tend to recommend using the CSS column approach if supported, as it is specifically designed for the purpose...that said, its hard to know what the precise purpose at hand is.
Examples
HTML
<h1>Inline</h1>
<div class='inline'></div>
<div class='inline'></div>
<h1>Float</h1>
<div class='float'></div>
<div class='float'></div>
<h1>Columns</h1>
<div class='cols'>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 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>
<h1>Table</h1>
<div class='table'>
<div class='cell'></div>
<div class='cell'></div>
</div>
CSS
html, body {
width:100%;
font-size:0;
margin:0;
padding:0;
}
h1 {
font-size:20px;
}
div {
border:1px solid;
height:200px;
width:50%;
box-sizing:border-box;
font-size:14px;
}
.inline {
display:inline-block;
}
.float {
float:left;
}
.cols {
-webkit-column-count:2;
width:100%;
}
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}