I have a grid of white divs with a green div behind
(like this).
I am trying to put text in each div, but for some reason, when I give a div text, that div is shifted down (like this). What css property/ HTML technique can I use to make the divs stay in place while still holding text?
The HTML consists of a div with this CSS:
#main {
top: 50px;
height: 280px;
width: 100%;
background-color: green;
position: fixed;
}
which contains divs with this CSS:
.small {
position: relative;
background-color: white;
border: 4px solid black;
width: 5%;
height: 80px;
display: inline-block;
margin-top: 2px;
}
and looks like this:
<div id="main">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<!-- etc -->
</div>
They are aligned at their baseline. If there is text, that's the baseline of the text (i.e. of the last line of text), if not, it's near the bottom of the container.
Add
.small {
vertical-align: top;
}
to change this.
Here's a codepen: http://codepen.io/anon/pen/oxVajG
Related
I want to horizontal align a div that consists of two other divs:
One from the left, that will contain an image.
Other from the right, that div will contain text, aligned to the left.
The alignment will be relative to a container, and the centered div should expand to a maximum width (and not take the entire container's width).
This pen describes what i tried to do using table layout
This is the HTML
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text
</div>
</div>
</diV>
And the CSS
.container {
width: 200px;
background-color: red;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
}
.right {
background-color: blue;
display: table-cell;
vertical-align: middle;
}
As you can see, the space on the right of the blue area is part of the centered div (the green+blue area), but it makes the div's content not to be centered. What i would like is the blue area to take the width of the longest line in it
If you're wanting the blue area to dynamically grow with the text inside of it while retaining a centered area of content would the following be what you're looking for?
.container {
width: 200px;
background-color: red;
padding:0 20px;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
color:#fff;
}
.right {
background-color: blue;
display: block;
vertical-align: middle;
width:inherit;
color:#fff;
}
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text very very very long right textvery very very long right textvery very very long right textvery very very long right textvery very very long right text
</div>
</div>
</div>
I have a problem aligning my div's side by side...
Here is an image how it should look:
This is the code for the main structure:
<div id="AttackDiv">
<div id="ImageDiv">
</div>
<div id="ContentDiv">
</div>
<div id="SkillDiv">
</div>
</div>
The "ImageDiv" is where the picutre is located. It takes up 120px.
The "ContentDiv" is where the text is inside and the "SkillDiv" is where the 3 other black boxes are inside.
This is my CSS:
#ImageDiv {
height: 100%;
width: 120px;
float: left;
background-color: white;
}
#ContentDiv {
height: 60%;
background-color: green;
}
#SkillDiv {
height: 40%;
background-color: blue;
}
Shows up this:
The problem is when I am trying to add those black boxes which you can see above in the image. Here is how it looks:
If I remove the white background color, you can see that somehow the Div's aren't aligning properly. They are kinda like running in each other.
Divs are block elements by default and, in the normal flow, they occupy 100% width of their container. So, naturally, div elements will stack vertically forming a column.
To make them align side-by-side consider these options:
apply float: left to all divs you want to display in a row
define the divs as display: inline-block
OR, for a very simple and efficient solution, just use flexbox:
Aligning Three Divs Horizontally Using Flexbox
Also, when working with floats, it helps to be familiar with clearfix methods:
What is a clearfix?
What methods of ‘clearfix’ can I use?
Clearing Floats: An Overview of Different clearfix Methods
Put the stuff on the right side into its own div container and then float it to the right.
If I understood you right, this should be it:
HTML
<div id="AttackDiv">
<div id="ImageDiv">left
</div>
<div id="RightSide">
<div id="ContentDiv">right1
</div>
<div id="SkillDiv">right2
</div>
</div>
</div>
CSS
#ImageDiv {
height: 100%;
width: 120px;
float: left;
background-color: white;
}
#ContentDiv {
height: 60%;
background-color: green;
}
#SkillDiv {
height: 40%;
background-color: blue;
}
#RightSide {
float: right;
width: 200px;
}
You can look at it here: https://jsfiddle.net/mxcqyjos/4/
I am having trouble vertical aligning text in a div. I have tried suggestions that i have read on other posts. I'm sure its obvious what I am doing wrong but its not working.
http://jsfiddle.net/o6gqvtoo/
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text{
display: block;
vertical-align: middle;
}
.pull-left {
display: block;
}
vertical-align is sort of an odd one.
Generally you should use it on the elements themselves, not their containers and it's really only for inline and inline-block elements.
But even then it probably won't vertically center like (I'm guessing) you are wanting. So a little trick is to set your line-height to the same as your height and voila:
http://jsfiddle.net/06c7eosv/
Note: With display: inline-block and width: 50% you can't have any white space between the elements in your html
Good:
<div>...</div><div>...</div>
Bad:
<div>...</div>
<div>...</div>
Based on the supplied image and limited information availableI believe that the best option available is to absolutely position the banner-text wrapper div
.banner {
margin-top: -2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pull-left {
display: block;
}
<div class="banner">
<div class="span10">
<!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
</div>
</div>
</div>
That said, other options may be available if the two internal divs can be combined.
Usually, vertical-align sets the alignment of inline level elements relatively to the line box.
However, in when applied to table cells, it has a different meaning: it sets the alignment of the content inside the cell.
Therefore, you can use CSS tables:
.banner {
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text {
display: table-cell;
vertical-align: middle;
}
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text{
display: table-cell;
vertical-align: middle;
}
.pull-left {
display: block;
/* float:left; */
}
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
</div>
I'd like to know how to get the following result:
Green is a container div 700 pixels wide. Blue is a title area which fills the green container width-wise with some title text centred in the middle. Red needs to float on the right without affecting the flow of the text in the title.
How do I achieve this? I've tried floating the red box on the right but it seems to push the text in the title to the left for some reason.
Edit - For the record, I hadn't posted an example because HTML and CSS isn't really my area of expertise and I'm struggling to get back to an example where the text didn't align (having tried half a dozen different methods I've been reading).
Here's roughly what I was trying: http://jsfiddle.net/3fgytw0u/
<!DOCTYPE html>
<head>
<title></title>
<style>
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
align:right;
width: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>This</h1>
<h2>Is</h2>
<h2>A</h2>
<h2>Long</h2>
<h2>Title Title Title Title</h2>
</div>
<div id="GameGuidelines">
<ul>
<li>Some</li>
<li>Info</li>
<li>Here</li>
</ul>
</div>
<div id="Introduction">
<p>Rest of the page continues here</p>
</div>
</div>
</body>
</html>
Move the element up into the header, set it to position:absolute and give it a margin-left:500px;
http://jsfiddle.net/3fgytw0u/2/ <-- that one is right
Maybe it would help you: Link
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
position: relative;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
text-align:right;
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: grey;
}
Alternative approach to positioning can be using negative margin-left equal to width of red area:
h2 {
padding: 10px;
background: #EEE;
text-align: center;
overflow: hidden;
}
h2 .right-block {
width: 50px;
height: 50px;
background: coral;
float: right;
margin-left: -50px;
}
<h2>
Some centered text
<div class="right-block"></div>
</h2>
Here is what you want.
<html>
<head></head>
<body>
<div style="border:green 1px solid;height:700px;" >
<div style="border:blue 1px solid;width:100%;height:200px;text-align:center">
Some Title Text
<div style="float:right;border:1px red solid;width:100px;height:100px;margin-right:5px;position:relative;">
Some text
</div>
</div>
</div>
</body>
</html>
Red div will float on the right inside the blue one.
That could be simply done by positioning the inner div as position: absolute and putting it right: 0px, but because you need to prevent that it does not start to be positioned with the main display instead, you put position: relative to the outer div too. Also make sure that while writing you put the red div first and then the div which has purple text, or you can just add top: 0px so that you don't care about that anymore.
Then it should work!
Here's a fiddle: http://jsfiddle.net/xg6rove7/
But be wary of the fact that any text in the red box can then overlap the text in the purple, as I have tried to show you in the fiddle. You might b better with using a padding for both sides equal to the box's width, or just use your plain old float: right
I have placed 3 divs next to each other using the block-inline property.
When I add text inside the div that exceeds the divs width, it will displace surrounding divs by shifting them down slightly.
<div class="explained_container">
<div class="explained_c-1">Why does text in this div displace the other divs</div>
<div class="explained_c-2">Div 2</div>
<div class="explained_c-3">Div 3</div>
</div>
Here is a fiddle I created to present the problem.
http://jsfiddle.net/32E8m/
Add float:left to these classes .explained_c-1, .explained_c-2, .explained_c-3
Missing float: left.
.explained_c-1, .explained_c-2, .explained_c-3 {
display: inline-block;
width: 33.3%;
height: 160px;
margin-right: -4px;
float:left;
}
See http://jsfiddle.net/32E8m/3/
I have added float:left; to all 3 div elements.
now you can add as many text as you want.
<div class="explained_container">
<div class="explained_c-1">Now you can have as many text as you want</div>
<div class="explained_c-2">Div 2</div>
<div class="explained_c-3">Div 3</div>
</div>
.explained_container{
width: 604px;
}
.explained_c-1, .explained_c-2, .explained_c-3 {
display: inline-block;
width: 33.3%;
height: 160px;
margin-right: -4px;
float: left;
}
.explained_c-1 {
background: #bbb;
}
.explained_c-2 {
background: #ccc;
}
.explained_c-3 {
background: #ddd;
}
http://jsfiddle.net/32E8m/4/
I would just set the vertical-align: top; property to those classes (.explained_c-1, .explained_c-2, .explained_c-3) because you might not always want to float them.
Check it out here: http://jsfiddle.net/32E8m/5/
This way, you are aligning the elements to each other from the top of each of them.