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
Related
I have three divs that I would like aligned horizontally and also aligned on the center of the page.
What I have is close to what I want, but its not centered on the page and it doesn't resize with the browser window either.
I'm still new to HTML and CSS so any suggestions will be appreciated.
#wrapper {
width: 90%;
min-width: 768px;
max-width: 1280px;
margin-right: auto;
margin-left: auto;
}
.projectlogo {
float: left;
margin: 20px;
width: 122px;
height: 113px;
}
.projectsite {
border-radius: 50%;
border: solid #DFF0D8;
float: left;
margin: 20px;
width: 126px;
height: 126px;
}
.description {
float: left;
margin: 20px;
width: 400px;
}
#gallery {
width: 980px;
height: 240px;
font-size: 1.25em;
}
#gallery h2 {
text-align: center;
}
<div id="wrapper">
<main>
<div id="gallery">
<h2>My Work</h2>
<img class="projectlogo" src="images/rotary_logo.png" width="122" height="113" alt="" />
<div class="description">
<p>Rotary Club of Wilsonville is an ongoing project. They are an active group in their community and plan many events for variuos causes. They needed help keeping the calendar updated and improving some of the content on their site. </p>
</div>
<img class="projectsite" src="images/website2.png" width="126" height="126" alt="" />
</div>
</main>
</div>
The images won't show up for you readers, but I included the html to give you a better idea of what it is I am trying to accomplish.
I also included the wrapper information because that is what I am setting up the pages with to center everything and give it the pages white space on the left and right sides.
Here is a solution that centers everything, hopefully this is what you're looking for. To accomplish this, I created a div to wrap around your three divs, and gave it display: inline-block so that it shrinks to fit. Then I gave the parent text-align: center to line the wrapper div center. I also gave your gallery div auto margins on left and right, to center the entire thing. Finally I removed the top margin from your first p element so that the top lines up with the other divs.
Hopefully this is exactly what you were looking for!
Working Live Demo (make sure to click "Full Page" to see it fullscreen):
#wrapper {
width: 90%;
min-width: 768px;
max-width: 1280px;
margin-right: auto;
margin-left: auto;
}
.projectlogo {
float: left;
margin: 20px;
width: 122px;
height: 113px;
}
.projectsite {
border-radius: 50%;
border: solid #DFF0D8;
float: left;
margin: 20px;
width: 126px;
height: 126px;
}
.description {
float: left;
margin: 20px;
width: 400px;
}
.description p:first-child {
margin-top: 0;
}
#gallery {
width: 980px;
height: 240px;
font-size: 1.25em;
margin: 0 auto;
}
#gallery h2 {
text-align: center;
}
#wrap {
display: inline-block;
}
main {
text-align: center;
}
<div id="wrapper">
<main>
<div id="gallery">
<h2>My Work</h2>
<div id="wrap">
<img class="projectlogo" src="images/rotary_logo.png" width="122" height="113" alt="" />
<div class="description">
<p>Rotary Club of Wilsonville is an ongoing project. They are an active group in their community and plan many events for variuos causes. They needed help keeping the calendar updated and improving some of the content on their site.</p>
</div>
<img class="projectsite" src="images/website2.png" width="126" height="126" alt="" />
</div>
</div>
</main>
</div>
JSFiddle Version: https://jsfiddle.net/66jhc0Ld/1/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Meriniuc Răzvan - Dumitru</title>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div id="header">
<h3>
Cv
</h3>
</div>
<div id="footer"></div>
</body>
</html>
.left {
border-radius: 10px;
background-color: green;
height: 310px;
width: 75px;
float: left;
margin-top: 65px;
}
.right {
border-radius: 10px;
background-color: blue;
height: 310px;
width: 50px;
float: right;
margin-top: 65px;
}
#header {
position: fixed;
height: 65px;
background-color: red;
width: 720px;
border-radius: 10px;
display: block;
}
#footer {
clear: both;
height: 65px;
width: 720px;
background-color: black;
border-radius: 10px;
}
h3 {
margin: auto;
}
With "margin:auto".
Without "margin:auto"
I am learning HTML and CSS and have tried to create a CV page, but my header won't center. I have read about this problem and the general solution seems to make the header display as a block, but it still doesn't work.
Could you please explain why this code does not center my header and offer a possible solution? Thank you in advance!
Auto margins centre the element. They don't centre the inline content of it.
The header is centred. The text "Cv" is aligned to the left of the header.
To centre that, use text-align.
Use text-align: center; The h3 tag contains text.
h3 {
text-align: center;
}
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%;
}
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
I've been search for more than a day a way to vertical align my fluid designed header so without knowing font-size nor spesific pixels my 3 divs will be the same height and the content inside them in the same line.
Here is an fiddle example of what I have now so you might understand what i need better.
And this is the code:
HTML:
<div id="container">
<div id="header">
<div id="menu">
<a href="#">
<img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
</a>
</div>
<div id="title">
My site title
</div>
<div id="my_button">
<button id="button">My button</button>
</div>
<div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>
CSS:
html,body {
height: 100%;
font-size: 2vmin;
}
#container {
height: 100%;
min-height: 100%;
}
#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}
#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}
#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}
div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}
#content {
height: 70%;
width: 100%;
background: #eeeeee;
}
You can use :after pseudo element for solving your problem.
add this after #header styles in your CSS
#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}
Then remove floats from #menu, #title and #my_buttun div's and apply
display: inline-block;
vertical-align: middle;
The inline-block will create small gaps between these div, but if you're not apply background colors to them , then it is ok.
Last: make #my_button width: 19%;
Look here: http://jsfiddle.net/D22Ln/5/
If you mean the three horizontal divs, setting height: 100%; for all of them will do the trick. From there you just modify the size of their parent element (currently at 20%) and they will adapt automatically.
http://jsfiddle.net/D22Ln/2/
If I have understood you correctly this is maybe what you are looking for, I just copied that I have done earlier. But test it out: http://jsfiddle.net/6aE72/1/
By using wrapper and a helper you will have the left and right div same size as middle and helper helps with vertical alignment
#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }
This FIDDLE might help you. I've used bootstrap framework. Re-size the RESULT grid.