My current work is shown below. What I would like to achieve is that the text Membership Registration is aligned center, while the hyperlinks English and 中 文 is floating right but close to border-bottom - Now they are floating to the top.
HTML:
<div id="Header">
<a id="logo" href="http://localhost"><img alt="logo" src="images/logo.jpg"/></a>
<div id="HeaderText"><h1>Membership Registration</h1></div>
<div id="header_right">
English |
中文
</div>
</div>
CSS:
#Header {
height:70px;
margin-bottom:11px;
border-bottom: #dbe0e3 1px solid;
}
#header_right {
float: right;
padding-right: 50px;
}
#logo {
float: left;
height:65px;
left:20px;
top:17px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
#HeaderText {
float: left;
text-height: 65px;
text-align: center;
left: 50%;
}
Add padding-top to #header-right.
#header_right {padding-top: 30px;}
http://jsfiddle.net/e67wd21v/1/
Note to your code:
left and top do nothing when the element has no position property (#logo)
text-height property doesn't exist (used at #headerText) - you probably meant height or line-height.
update css for header_right
#header_right {
float: right;
padding:30px 50px 0 0;
box-sizing:border-box;
}
check fiddle
http://jsfiddle.net/swapnilmotewar/sh72pgmx/1/
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;
}
I've been trying to find a solution to this for days, but haven't found anything that works.
I thought I'd finally make an account on this great website, so here goes:
I am trying to have a div expand from left to right, with 170px of clearance on both sides.
However, when there is no content on the page, or only a few words, the div doesn't expand.
I've tried to add width: 100% in several different divs to try and have them take up the full space, but that either does nothing, or completely busts the page layout. for example, instead of filling out the page, the div that's supposed to hold the content moves off the right side of the screen, and also doesn't leave the 170px margin.
I hope you can be of help, my code is posted below:
Thanks in advance,
Chris
the html:
<html>
<body>
<div id="wrapper">
<div id="pagetopwrap">
</div>
<div id="pagemainliquid">
<div id="pagemainwrap">
<div id="content">
<div id="headerwrap">
<div id="header_left">
</div>
<div id="header_main">
<div id="logo_row">
<p id="logotext">Site Title</p>
</div>
<div id="menu_row">
<!-- irrelevant menu button code -->
</div>
</div>
<div id="header_right">
</div>
</div>
<div id="contentbody">
<div id="contenttext">
<p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
the css:
It is not ordered too well, the uninteresting sides, top and footer are first, and the main part of the website at the bottom
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #0f0f0f; /* is normally an image */
}
#wrapper {
width: 100%;
min-width: 960px;
max-width: 1920px;
margin: 0 auto;
height: 100%
}
#pagetopwrap {
height: 50px;
width: 100%;
float: left;
margin: 0 auto;
}
#pagemainliquid {
float: left;
}
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
}
#leftcolumnwrap {
width: 170px;
margin-left:-100%;
float: left;
}
#leftcolumn {
margin: 5px;
}
#rightcolumnwrap {
width: 170px;
margin-left: -150px;
float: left;
}
#rightcolumn {
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
bottom:50px;
}
#footer {
height: 0px;
margin: 5px;
}
#headerwrap {
width: 100%;
margin: 0 auto;
}
#header_left {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
float:left;
}
#header_right {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
margin-left: 0px;
float:right;
position:relative; top:-200px;
}
#header_main {
background-color: #00ff00; /* is normally an image */
margin-left: 25px;
margin-right: 25px;
height:200px;
background-size: 100% 200px;
}
#contentbody {
background-color: #E2E2E2;
border-radius: 10px;
margin-top:10px;
border: 1px solid #A7A7B2;
}
#contenttext {
margin-left:10px;
margin-right:10px;
}
#logo_row {
height:150px;
width:100%;
float:left;
}
#logotext {
margin-top:20px;
margin-left:10px;
vertical-align: middle;
font-size: 55px;
font-family: "Arial Black", Arial;
}
#contenttextmakeup {
margin-top:12px;
margin-left:10px;
vertical-align: middle;
}
#menu_row {
width:100%;
}
button.menubutton {
/* irrelevant button markup */
}
http://jsfiddle.net/w9qLh6tp/ if that helps, I've seen it a lot around here :)
Instead of using !important, save yourself a headache in figuring out why important works.
CSS = cascading style sheets. You have a selector with more specificity which is why your width property isnt changing. Figuring out the route of the problem will save you time in the future when this happens again (and it will)
For example, if I styled something like so
#container .red { width: 50% }
updating the style using .red without the #container in front of it has less specificity. So if they are both modifying the same property, the one with more prevalence will take effect. This is true for media queries as well.
Fixed here http://jsfiddle.net/w9qLh6tp/1/
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
width: 100% !important; // set it highest priority
border: 3px red solid; // border is set just for demonstration
}
set the width to be 100% with priority (!important) that will override any other css styling.
I want to have something like this:
================================
====IMAGE==============TEXT=====
================================
and I used:
.menu {
background-color: red;
padding: 40px;
text-align: right;
}
.menu img {
float: left;
}
Result:
================================
=======================TEXT=====
====IMAGE=======================
How can I do this?
I think that you have to use line-height with height in your text and set a width to your menu, something like:
<div class="menu">
<div class="img">
<img src="http://placehold.it/350x50" />
</div>
<div class="text">
<p>your text</p>
</div>
</div>
.menu {
background-color: red;
text-align: right;
width:100%;
}
.menu img {
float: left;
}
.menu text {
float: left;
}
.text p{
height:50px;
line-height:50px;
}
DEMO
You would need the image to be first in the markup. Float will make inline items wrap around something, but only the inline items that come after it in the markup.
Elements are not getting exact float and width property.
.menu {
background-color: red;
padding: 40px;
float: right;
max-width: 40%;
}
.menu img {
float: left;
max-width: 60%;
}
Now try to wrap them and use
.wrapper {
display: inline-block;
}
I am not that bad at this, but somehow i am not able to center the contents of the page.
Also, the logo and tbar-right divs are not aligning properly (I'd like them to be arranged in a single line).
This is my markup:
<body>
<div class = "container">
<div id="topbar" >
<div class="logo">
<img src="images/rg-logo.jpg"/>
</div>
<div class="tbar-right">
<div id="User"><!--the script will feed this div--></div>
<!--Dummy Text-->Jasdeep, you have 24 routemiles |
My Profile |
Logout
</div>
</div>
</div>
</body>
...and these are the styles:
* {
margin:0;
padding:0;
}
body{
-x-system-font:none;
background:#FFF;
border:0 none;
color:#555F6A;
font-family:Verdana,arial,helvetica,sans-serif;
font-size:0.7125em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5em;
margin:0;
padding:0;
text-align:center;
}
.container {
text-align: center;
}
#topbar {
background-color: #df3e36;
height: 32px;
width: 1004px;
}
.logo {
padding-left: 20px;
padding-top: 4px;
width: 15%;
height:27px;
}
.tbar-right {
text-align: right;
padding-right: 10px;
color: #FFF;
padding-top: 7px;
width: 85%;
}
.tbar-right a{
color: #FFF;
}
Please, help!
.container{margin:0 auto;}
As long as you have defined an explicit width. You should also probably replace
<div class = "container">
with
<div class="container">
Should center container. Make sure you don't float it.
.container{
width: /* must specify a width */
margin-left:auto;
margin-right:auto;
}
This should fix the alignment
.logo{
float:left;
padding-left: 20px;
padding-top: 4px;
width: 15%;
height:27px;
}
.tbar-right{
float: right;
padding-right: 10px;
color: #FFF;
padding-top: 7px;
width: 85%;
}
And you may need to rearrange the HTML a bit by putting the .tbar-right before the .logo
Try this:
#topbar { margin: 0 auto;}
The logo isn't aligning with the other stuff because it has a different padding-left. Change to
.logo {
padding-left: 0px; //or don't even list a padding-left,
padding-top: 4px;
width: 15%;
height:27px;
}
OH if you wanted it on the same line horizontally float them both to the left or right, and make sure there's enough space. ;D