I have a header in my web page where logo, application name, help link and logout are shown. Logo is placed left top, logout is placed right top, help is placed before logout link. The rest of the space should be occupied by the application name. I tried to float all the divs and then my divs lost width and when I try to set width on my app name div I get unexpected results when I try to set width: 100%. Even I dont set the width to 100% if the application name text increases I get unexpected results.
This is the code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
width: 100%;
}
.help {
line-height: 35px;
float: right;
height: 100%;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="product-name">
App name
</div>
<div class="logout">
Logout
</div>
<div class="help">
Help
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Here is a working sample.
I then tried doing the same with CSS3 calc method. But this involves hard coding the widths. A small change in logo's width or logout, help divs widths will create problems in the app name div.
Click here to see the working example with css3 calc
Then I tried to do it using float with inner divs. Below is my new code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.wrapper {
height: 100%;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
}
.help {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.oss-text {
line-height: 35px;
height: 100%;
overflow: hidden;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="wrapper">
<div class="logout">
Logout
</div>
<div class="wrapper">
<div class="help">
Help
</div>
<div class="oss-text">
App name
</div>
</div>
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Click here to see the working example.
But this is creating lot of dom. Is there any other approach or the second solution is good enough?
The first solution is a total flop.
If I use CSS3 then I have to hardcode the widths
Solution 2 involves making the dom deeper.
I think there is another solution which involves using absolute positioning. But I dont know how to do it and is it a good approach or not.
You can achieve what you want using display:table and display:table-cell:
.header {display:table}
.header > div {display:table-cell}
As long as you give widths to logo, logout and help divs then the app name should stretch to take up the rest of the header
Example
Here's what you need with only 3 div containers
The markup:
<header>
<div class='logo'></div>
<div class='appName'><h3>Some App</h3></div>
<div class='btn-container'>
<button >Help</button>
<button>Logout</button>
</div>
</header>
and the CSS:
header {
position: fixed;
top: 0px;
width: 100%;
display: table;
}
header div {
display: table-cell;
vertical-align: middle;
}
.logo {
width:40px;
background: steelblue;
height: 40px;
float: left;
}
.btn-container {
width: 80px;
float: right;
}
.appName {
text-align: center;
width: 100%;
}
Try this:
.product-name {
line-height: 35px;
height: 100%;
text-align: center;
width: 100%;
}
Related
I want to place an image next to some text inside a div but the image was pushed into the next div below and won't move up no matter how much I increase the margin or padding. I want the center of the image to be where the tip of the arrow is in the picture:
Here's where the image is and where I want it to be
Here's the CSS and HTML:
.header {
padding: 10px 16px;
background: #1919ff;
color: #f1f1f1;
}
#about {
background-color: #ccccff;
height: 400px;
width: 67%;
margin: auto;
}
.round-border{
border-width: 0px;
border-style: solid;
border-radius: 50%;
}
.portrait-image{
width: 25%;
margin-bottom: 120%;
}
h9 {
font-size: 142%;
margin: auto;
padding-right: 30%;
padding-top: 12%;
display: inline-block;
}
.header-bar{
height: 3px;
width: 51%;
background: #272C31;
margin-right: 23%;
margin-top: 3%;
}
h10 {
font-size: 142%;
margin: auto;
padding-right: 24%;
padding-top: 5%;
display: inline-block;
}
#image position {
position: relative;
z-index: 1;
margin-botton: 40%;
padding-bottom: 20%;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<style>
img {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
<div class="header" id="myHeader">
<h2> xxxxxxxxx</h2>
</div>
<body style="background-color: #5D6D7E;">
<div id="about" align="center" position="relative">
<h9><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</h9>
<div class="header-bar"></div>
<h10><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</h10>
<div id="image position"><img class="portrait-image round-border" align="right" src="http://abload.de/img/gpuxh.png" alt="portrait">
</div>
</div>
</body>
Any help would be greatly appreciated, thanks.
There were many things wrong with your code and I'm not sure where to begin. There are no h9 or h10 header tags. I would suggest using valid header tags and modifying the font-size according to your taste. Also, you can't have a class/id name separated by a space. So, "image position" will not work. Fixed it the best way I could.
.header {
padding: 10px 16px;
background: #1919ff;
color: #f1f1f1;
}
#about {
background-color: #ccccff;
height: 400px;
width: 67%;
margin: auto;
box-sizing: border-box;
}
.round-border {
border-radius: 50%;
}
.portrait-image {
width: 25%;
}
.header-bar {
height: 3px;
width: 51%;
background: #272C31;
margin-right: 23%;
margin-top: 3%;
}
#image-position {
float: right;
margin: 15% 5% 0 0;
}
#text {
float: left;
width: 57%;
word-break: break-all;
margin: 5%;
}
.clearfix {
/*clear the floats here*/
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<body style="background-color: #5D6D7E;">
<div class="header" id="myHeader">
<h2> xxxxxxxxx</h2>
</div>
<div id="about" class="clearfix">
<div id="text">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<div class="header-bar"></div>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait">
</div>
</body>
You can use CSS float. It is for elements that 'float' to the side of a text.
Try setting:
#image-position {
/* ... Your css here */
float: right;
}
More information here.
Use bootstrap to achive this, try the below code snippet.
<div class="container">
<div class="row">
<div class="col-md-8">
<p>
Your text goes here...
</p>
</div>
<div class="col-md-4">
<img src="">
</div>
</div>
</div>
I hope this helps,
Basically, when I try to add a paragraph into one of the <div>'s I run into trouble. The page seems to be messed up. Is there anything wrong with my code? And, what are some things that my code needs to be improved?
Thanks!
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
left: 676px;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
First of all, you have commas in your HTML, which is incorrect.
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left" class="wot">
<p>Test</p>
</div>
<div id="right" class="wot">
</div>
</div>
Second, the heights of the divs with the text in is set to 100% and the height of you #content div set to 1500px so the divs expand to this full height. The height of a div is only applied when it contains content which is why it changes when you put text in. You can remove the height from the CSS, or set it to a more appropriate value.
Two of your <div>s have commas separating the properties. Properties in html tags do not need to be separated by commas. They should just be separated by a space (this probably isn't even required, but you should do it in the interest of good style).
I'm going to assume the improper indentation is a result of posting the code, but if that's not the case, proper indentation is always a good way to improve your code.
I have change the following CSS code css
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
I'm having some trouble floating some elements. I've reproduced an example here.
Basically I want Logout to appear on the right (just like the image appears on the left), but am having trouble doing so.
If you swap float: right with float: left and vice-versa in .logo and user-header, Logout still appears on the new row while the logo will correctly float right.
I feel I am missing something obvious here.
Any ideas?
Thanks.
http://jsfiddle.net/xVXPk/15/
Try this. ( always do float:right, float:left, center, clear:both ) -- note close your image tags.
<div id="header">
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
<div class="logo">
<img src="#"/>
</div>
<div class="company-header">
<a title="title" href="index.php"><b>Hello</b></a>
</div>
<div style="clear:both; height:1px; width:99%" ></div>
</div>
#header {
width: 600px;
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
margin-left: 30px;
}
#header .logo img {
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
text-align: center;
width: 200px;
margin: 0 auto;
}
#header .user-header {
float: right;
margin-right: 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
duplicate of this post:
How to align 3 divs (left/center/right) inside another div?
To explain, as far as I understand the issue, when the browser draws the page, it will render the center content, first as it process the page in logical order. then apply the floats this is why the right hangs. But by adding the floats first the browser will know before rendering the center to float the content to the right, because it goes , left center right in the first case, and in the second right left center. If that makes sense. Sort of order of processing operations.
You simply haven't done the math right. There is not enough space for the div class="user-header" to be positioned on the RH-side. See the JSFiddle with borders.
EDIT: and you need to float:left the div class="company-header" as well: live demo.
Used code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live demo</title>
<style>
div {
border: 1px solid black; /* added */
}
#header {
width: 600px;
height: 60px; /* added */
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
width: 33%;
max-width: 180px;
padding: 5px 30px;
}
#header .logo img {
max-width: 120px;
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
margin: 0 auto;
width: 33%;
text-align: center;
float: left; /* added */
}
#header .user-header {
float: right;
w/idth: 33%; /* de-activated */
max-width: 180px;
padding: 5px 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
<img src="#">
</div>
<div class="company-header">
<a title="title" href="index.php">
<b>Hello</b>
</a>
</div>
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
</div>
</body>
</html>
Add class to anchor: <a class="logout" href="#">Logout</a>
css:
#header {
position: relative;
}
.logout {
line-height: 58px; /* Same height as #header */
position: absolute;
top: 0;
right: 30px; /* Same padding-left of logo */
}
DEMO
Hello my question is about aligning divs. On a website i am working on for fun i have a div and inside that div is a child div. i need the child to be in the middle of the adult div. The left and right are aligning in the middle but it is stuck to the top. If anyone could help me that would be greatly appreciated!
JSFIDDLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>
<body>
<div id="container">
<div id="logo">
</div>
<div id="nav">
</div>
<div id="content-background">
<div id="content">
</div>
</div>
<div id="faqs">
</div>
<div id="footer">
<div id="footer-right">
</div>
<div id="footer-left">
</div>
<div id="footer-bot">
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 25%;
height: 50px;
float: left;
background-color: red;
}
#nav {
width: 75%;
height: 50px;
float: left;
background-color: green;
}
#content-background {
width: 100%;
height: 600px;
clear: both;
background-image: url('images/background.jpg');
}
#content {
width: 50%;
height: 300px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#faqs {
width: 100%;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#footer {
width: 100%;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#footer-right {
width: 50%;
height: 150px;
float: left;
background-color: blue;
}
#footer-left {
width: 50%;
height: 150px;
float: left;
background-color: pink;
}
#footer-bot {
width: 100%;
height: 50px;
clear: both;
background-color: green;
}
It seems you want to align the div vertically to the middle as well as horizontally. The child div looks good horizontally, but aligning to the center vertically is a bit trickier.
An easy solution since you know the height of #content-background would be to position #content relative to the parent and then move it down by 150 pixels.
#content {
...
position: relative;
top: 150px;
}
Here's a working fiddle http://jsfiddle.net/ry5xU/3/
Here's a really good breakdown of how you can accomplish true vertical centering:
How to vertically center divs?
You can use margin:auto to show a div at center.
Check out this and this or this might help.
#main_div {position:relative;}
#child_div {position:absolute; right:50%; margin-right:-200px; top:50%; margin-top:-200px;}
you should do this for your css.
when the width and height of your child div is 400px , in "margin-right" or "margin-top" you write -200px on them . It means the half of width with a Minus behind that should be in "margin-right" and the half of height with a Minus behind that should be in "margin-top".
Good luck .
I have a problem with HTML.
The #content div wont get the width.
div test is centered, and #menu should have 15% width and #info to.
I tried clear: both; but it wont work...
Maybe its a issue to width 100%.
<!doctype html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
}
#wrapper {
background-color: green;
width: 100%;
height: 100%;
position: fixed;
}
#upper {
height: 15%;
background-color: blue;
}
#test {
height: 85%;
width: 100%;
margin: 0px auto;
}
#test #menu {
width: 15%;
height: 100%;
float: left;
/* scroll bar */
overflow-y: scroll;
overflow-x: hidden;
background-color: red;
}
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="upper">
upper
<!-- logo etc -->
</div>
<div id="test">
<div id="menu">
menu
</div>
<div id="content">
content
</div>
<div id="info">
info
</div>
</div>
</div>
</body>
</html>
Could somebody help me!
The problem is that you are overwriting your declarations:
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
I would recommend the Use of inline-block on the element instead of floating.
although it has is own faults..
http://jsfiddle.net/avrahamcool/gMMHL/1/
Auto margins don't work with percentages. You'll have to give it a fixed dimension in order for the margin centering to work.