I am trying to do a vertical align for my texts. I also want to make sure the green background div need to cover from top to bottom inside the red color div. Currently the green color div only covers 90% of the red oolor div. I am not sure what happened in my case. Can anyone explain and help me out?
html
<div id='wrapper'>
<div class='head'></div>
<h2 class='title'>Warm-Up</h2>
</div>
css
.title{
display: inline;
padding-left: 15px;
vertical-align: middle;
margin: 0;
}
.head{
width: 30px;
height: 50px;
display: inline-block;
background-color: #A9D075;
}
#wrapper{
width:200px;
background-color: red;
}
http://jsfiddle.net/rmS2f/3/
Thanks.
Demo http://jsfiddle.net/rmS2f/6/
Your html structure will work but you need to change the styles:
.title {
display: inline-block;
padding-left: 45px;
vertical-align: middle;
margin: 0;
line-height:50px;
}
.head {
position:absolute;
left:0;
width: 30px;
height: 100%;
display: inline-block;
background-color: #A9D075;
}
#wrapper {
position:relative;
width:200px;
height:50px;
background-color: red;
}
Related
In the image below, on the left is the output of my html/css, on the right is what I would like the layout to look like.
I'm pretty clueless as to:
how to Center the header
why the 'upper right' text and button are being forced to the next line by the header (as opposed to orienting in the upper right
how to align the text area so that it is to the right of the image
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="outer_border">
<div class="inner_border">
<!--just use a div to represent the image -->
<div class ="image">
</div>
<span class="upper_left_text">
upper left
</span>
<span class ="header">
<h2>
Header
</h2>
</span>
<span class="upper_right_text">
upper right
</span>
<button class="button1">Button</button>
<textarea class="text_area">Text Area</textarea>
<button class="button2">Button 2</button>
</div>
</div>
</body>
</html>
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
float: right;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
.button1 {
float: right;
}
.button2 {
float: right;
width: 80px;
height: 60px;
}
.text_area {
clear: both;
display: block;
width: 100%;
height: 150px;
margin: 5px;
/*I have no idea how to position this*/
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
I made a jsfiddle, check this one, should get you started :)
https://jsfiddle.net/fazbyxyq/
html5
<div class="right">
<div>upper left</div>
<div>header</div>
<div>upper right</div>
<div><textarea>textarea</textarea></div>
<div>button2</div>
</div>
css3
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.left{
float:left;
width:10%;
height:100px;
border:1px solid #000;
}
.right{
float:left;
width:89%;
margin-left:1%;
}
.right div{
float:left;
width:33%;
border:1px solid #000;
}
.right div:nth-child(2){
text-align:center;
}
.right div:nth-child(3){
text-align:right;
}
.right div:nth-child(4),.right div:nth-child(5){
width:99%;
border:0;
}
.right div:nth-child(4) textarea{
width:100%;
height:100px;
margin:10px 0;
}
.right div:nth-child(5){
text-align:right;
}
Peace out!
well, Your code was wrong in many lvl's. I have fixed it to look like in your image... but it's just a fix. Maybe not what you are looking for.
As a resume: You want a container with an image looks like a column and the rest of the html stay as another column.
Then, as you did, the image container is floating left with a fixed width of 50px but we have to add 10px more as you have given the container 5px margin (5px right and left = 10px),
Then I just add a container which will take the rest of the html. THen it's easy to give the container a float left and as its width 340px so the total of your layout is, as you want, 400px.
I have added both box-sizing: border-box; to make the border be inside the containers and not messing with the fixed widths.
Then I just have added .header {float:left;} as basically ion your code you have a class named the_headerwhich is not even used in the html. and then a bit of margin to the h2 to separete it from upper left
here you have the fiddle
The key lays in treating your layout as a layout with 2 columns. I believe the markup should look something like this:
<div id='demo'>
<div class='col1'>
<img src='http://www.placehold.it/50x100' />
</div>
<div class='col2'>
<div class='header'>
<span class='left'>left</span>
<span class='right'>
<button>button</button>
right
</span>
<h2>center</h2>
</div>
<textarea>Lorem ipsum</textarea>
<button>button</button>
</div>
</div>
to achieve the result in your image, you should add the following css:
#demo {
border: 2px solid black;
padding: 10px;
}
#demo .col1, #demo .col2 {
display: inline-block;
vertical-align: top;
}
#demo .col2 {
width: calc(100% - 60px);
}
#demo .left {
float: left;
}
#demo .right {
float: right;
}
#demo .header {
text-align: center;
}
#demo textarea {
width: 100%;
min-height: 100px;
margin: 8px 0;
}
#demo button {
float: right;
margin-left: 8px;
}
Note that I've used as little fixed dimesions as possible. Just cause it will make your layout adapt easier to different content and different screen sizes.
I've put your code next to my proposal in a fiddle. I think the code should be fairly easy and self explanatory, but feel free to ask if anything isn't clear.
Here is another fiddle that uses the "calc" operation to set the textarea the remaining width of the div.
Here is the fiddle http://jsfiddle.net/SteveRobertson/tyokk1qj/
I wrap this image in and set the height to 100% and then modify the rest of the elements to the right use CSS
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
}
#tall{
height:100%;
float:left;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
h2 {
display:inline;
}
.button1 {
float: right;
}
.button2 {
width: 80px;
height: 60px;
display: block;
float:right;
}
.text_area {
clear: both;
display: inline;
width:auto;
height: 150px;
margin-right: 0;
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
.text_area{
width:calc(100% - 70px);
}
I have two DIVs, one is left floated with bigger font size and the other one is right floated with smaller fonts. I want to align the smaller fonted DIV to the bottom aligned with the bigger sized text. Not able to achieve it.
and the css
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.font12 {
font-size: 12px;
}
<div class="floatLeft">Activity</div>
<div class="floatRight font12 ">View timeline / Filter activities</div>
Answer changed to allow for float as per your request.
Please see FIDDLE.
HTML
<div class="big">Activity</div>
<div class="small">
<a href="javascript:void(0);">View timeline / Filter activities
</a>
</div>
CSS
.big {
float: left;
font-size: 2em
}
.small {
float: right;
position: relative;
font-size: 1em;
top: 13px;
}
Demo page
CSS needed:
.big {
display:inline-block;
vertical-align:bottom;
/* just for demo: */
font-size: 2em;
height:200px;
background:#FADDFF;
}
.small {
display:inline-block;
vertical-align:bottom;
/* just for demo: */
font-size: 1em;
background:#D2E9F7;
height:120px;
}
so making the two elements inline-block displayed, and vertical-align with value of bottom, they will be on the same level, and they're line of reference will be the bottom of them both
Additional to the above response, you can use display: table-cell to fit both div's to the same height:
.floatLeft {
border: 1px solid black;
font-size: 30px;
width: 200px;
display: table-cell;
vertical-align: text-bottom;
}
.floatRight {
border: 1px solid black;
font-size: 12px;
display: table-cell;
vertical-align: text-bottom;
width: 200px;
}
<div class="floatLeft">Activity</div>
<div class="floatRight font12 ">View timeline / Filter activities</div>
Here is the jsfiddle: https://jsfiddle.net/x3m72kqh/
JSFiddle: Solution in JSFiddle
Here is a solution with inline-block :
.big {
display:inline-block;
width: 50%;
float: left;
font-size: 2em
}
.small {
display:inline-block;
width: 50%;
font-size: 1em
}
a {
float:right;
}
html
<div class="main">
<h1>Test</h1>
<span class="details">Jan 21, 2014</span>
</div>
css
.main{
background-color: #666666;
border: 1px solid red;
}
h1{
background-color: #383838;
display: inline-block;
margin: 0;
padding: 0;
}
.main span{
display: inline-block;
vertical-align: middle;
}
jsFiddle
This seems to be really a simple problem, but I'm not able to fix it or I'm being too lazy. Just would like to vertical-align: middle and align it to the right of the div, if I use float: right the element attaches to the bottom of the border above. Don't want to use line-height as well.
If you want a solution that doesn't include line-height, and float, also you want to align the span to the right ....
Then use display: table; for the parent element having nested child elements set to display: table-cell;
Demo
.main{
background-color: #666666;
border: 1px solid red;
display: table;
width: 100%;
}
h1{
background-color: #383838;
display: table-cell;
margin: 0;
padding: 0;
width: 20%;
}
.main span{
display: table-cell;
vertical-align: middle;
text-align: right;
}
You want to add vertical-align: middle; to your h1
Fiddle
EDIT: figured it out - see the answer below for solution.
Background: I have two elements, an h1 and a span. I'm trying to place the h1 "Title" element on the left of the container element and the span "category" element on the right of the container, which I've done with float: left and :right.
Problem: I'd like a dotted line to appear between the h1 and span elements. If possible, I'd like to use a pseudo-element for this since it's purely aesthetic, so I'm trying to get the h1:after pseduo-element to fill the remaining width of the container element between the h1 and span.
I'm trying to keep my HTML as close to the following as possible:
<header>
<h1>Title</h1>
<span class="category">Category</span>
</header>
My CSS so far - the :after pseudo-element is currently positioned beneath the h1 element, as opposed to between the h1 and span:
header {
display: block;
background: cyan;
width: 80%;
margin: 0 auto;
}
h1 {
display: block;
float: left;
}
h1:after {
display: block;
float: left;
width: 100%;
border-bottom: 1px dotted black;
content: " ";
}
span {
display: block;
float: right;
background: green;
}
use this code:
jsFiddle
HTML
<div class="container">
<span>title</span>
<span class="category">category</span>
</div>
CSS
div{
width:100%;
position:relative;
height:50px;
border:1px solid;
}
span{
line-height:50px;
background:#fff;
padding:0 10px;
float:left;
position:relative;
z-index:1;
}
span.category{
float:right;
}
.container:after{
content:"";
position:absolute;
width:100%;
height:0;
border-bottom:1px dotted #4c5660;
top:50%;
left:0;
}
OK after more research, I discovered that what I'm looking for is called a dot leader. While the W3C Working Draft has a section on them here, they don't seem to be well-implemented yet. I found another approach on SO here. Using that answer, I revised my code as follows:
HTML:
<header>
<h1>Title</h1>
<span>Category</span>
</header>
CSS:
header {
overflow: hidden;
}
h1 {
float: left;
padding: 0 .4em 0 0;
margin: 0;
}
span {
float: right;
padding: 0 0 0 .4em;
margin: 0;
}
/* Dot Leader */
header:after {
content: "";
display: block;
overflow: hidden;
height: 1em;
border-bottom: 1px dotted;
}
Here's a JSFiddle with the result: http://jsfiddle.net/dx48R/
I have a div element in my page, and an arrow, that I am trying to get to the right middle of the div. Here's the code:
HTML:
<div id="popup">
<p>
This is the inside of a div element.
</p>
</div>
<div id="image"></div>
CSS:
#popup {
background-color: whiteSmoke;
width:500px;
margin:0px auto;
margin-top:100px;
}
#image {
background-image:url('/images/jquerys penis.png');
border:1px solid black;
width:30px;
height:30px;
float:right;
}
Website that I'm working on: site.brycemckenney.com/jquery.html
I had to modify your markup a little: http://jsfiddle.net/Wexcode/y7jTb/
HTML:
<div id="popup">
<p>This is the inside of a div element.</p>
<div id="image"></div>
</div>
CSS:
#popup {
width: 500px;
white-space: nowrap;
margin: 0 auto; }
#popup * { white-space: normal; }
#popup p {
background-color: whiteSmoke;
vertical-align: middle;
display: inline-block; }
#image {
background: url('http://site.brycemckenney.com/images/jquerys%20penis.png') 0 0 no-repeat;
border: 1px solid black;
width: 30px;
height: 30px;
vertical-align: middle;
display: inline-block; }
This solution depends on display: inline-block;, white-space: nowrap, and vertical-align: middle;. If you need help understanding any of what I've just posted, please feel free to ask.
On #image style add:
width: 30px;
margin: auto;