I want to center a div between the left side of the screen and a right floated div. I want to achieve exactly what margin:auto; usually does, unfortunately margin:auto; does not work when floated elements are involved somehow.
left element (that should be centered):
.wcard{
float: left;
/* margin:auto; */
background-color: white;
border-collapse: separate;
padding: 35px;
padding-bottom: 5px;
box-shadow: 0 0 6px #b2b2b2;
}
right element:
.slidein ul {
float: right;
padding: 4px 0;
overflow: hidden;
list-style: none;
}
html:
<body>
<header>
<img id = "menu" src="static/images/menunav.png">
</header>
<div class="wcard">
</div>
<div class="slidein">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Techniques</li>
<li>About me</li>
<li></li>
</ul>
</div>
</body>
Visual representation of what i want to achieve:
Here's exactly what you want to achieve
the idea of creating a big container then divide it into two ones and then margin:auto the div inside the one you need
html,body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 70px;
background: tomato;
}
.container {
width: 100%;
height: calc(100% - 70px)
}
.left{
float: left;
background: red;
width: 80%;
height: 100%;
}
.right{
float: left;
background: yellow;
width: 20%;
height: 100%;
}
.centered {
width: 100px;
height: 100px;
background: black;
margin: 0 auto;
}
<header></header>
<div class="container">
<div class="left">
<div class="centered"></div>
</div>
<div class="right">
</div>
</div>
I think that this is what you are trying to achieve. I started answering your question before you posted the html code so I created everything from scratch. I would advice you to use Bootstrap so you can mage your web page a bit more responsive.
This is for the floating left image:
#left{
width:50%;
margin-left:20%;
margin-top:10%;
}
The entire thing can be seen in this JS Fiddle: Solution #1
.wcard{
/* margin:auto; */
display: inline-block;
background-color: white;
border-collapse: separate;
padding: 35px;
padding-bottom: 5px;
box-shadow: 0 0 6px #b2b2b2;
margin: auto;
}
.slidein ul {
padding: 4px 0;
overflow: hidden;
list-style: none;
text-align: right;
}
main {
float: left;
width: 80%;
text-align: center;
}
nav {
float: right;
width: 20%;
}
<body>
<header>
<img id = "menu" src="static/images/menunav.png">
</header>
<main>
<div class="wcard">
this should be centered
</div>
</main>
<nav class="slidein">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Techniques</li>
<li>About me</li>
<li></li>
</ul>
</nav>
</body>
In order to "center" .wcard add:
margin-top: calc(25vh - 40px);
margin-left: calc(50vw - 70px);
If it's not in the position you want you can easily position .wcard by adjusting the margins. Note that vw and vh are used to make it responsive. Details are commented in Snippet
SNIPPET
/* This is just for help us visualize where each element is */
* {
outline: 1px solid black;
}
/* border-collapse is a table property */
.wcard {
float: left;
/* margin:auto; */
background-color: white;
/*border-collapse: separate;*/
padding: 35px;
padding-bottom: 5px;
box-shadow: 0 0 6px #b2b2b2;
/* Using margins and calc to determine offset */
margin-top: calc(25vh - 40px);
margin-left: calc(50vw - 70px);
}
.slidein {
float: right;
padding: 4px 0;
overflow: hidden;
list-style: none;
}
<body>
<header>
<img id="menu" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width='50'>
</header>
<div class="wcard">wCard
</div>
<!-- Removed the outer div as it seems unnecessary -->
<ul class="slidein">
<li>Home</li>
<li>Projects</li>
<li>Techniques</li>
<li>About me</li>
<li></li>
</ul>
</body>
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 5 years ago.
Hi I have the below HTML, Inside the Container I have Header, section and div.
With my current CSS below the div with class rightSideDiv does not show to right to the section element.
.container {
height: 500px;
widht: 500px;
background-color: red;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
The section and div should be shown side by side. I dont want to modify the current HTML structure. I have tried specifying float:left or right but both doesn't seem to work.
Apply float: left; to both containers, use width: 50%; instead of px and display: block; header
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:50%;
height:200px;
background-color: yellow;
float: left;
}
.rightSideDiv {
width:50%;
height:200px;
background-color: pink;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Change the H2 to display: block;, and then add float:left; to both boxes.
When you want divs side-by-side through floating, float them the same direction.
rightSideDiv is 8 pixels taller than the other. That is because the 4px border is added on top of the height. Consider using box-sizing: border-box;, which makes the border get absorbed into the set height, instead of being added on top of it.
.container {
height: 500px;
width: 600px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
display: inline-block;
float: left;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
display: inline-block;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Try using flexbox and display:flex instead. With very few changes to css you can get something like this: https://jsfiddle.net/vnuz47va/2/
.container {
height: 500px;
width: 520px;
background-color: red;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
width:100%;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
change your css with this :
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
float : left;
width: 50%;
height:200px;
background-color: yellow;
}
.rightSideDiv {
float : right;
width:50%;
height:200px;
border: 4px solid green;
}
you can use float right and left to align your div, however your container has a width to 400 and your 2 div are 249+249 = 498 so there is a problem here..
Using CodePen, I've been trying to style a fixed navigation bar with my username on the left side and a list of inline links on the right side. I haven't figured out how to properly format it because after putting the h1 or p element with my username, the list of links aren't even within the colored div that they're held in.
My question is: how do I format my navigation bar properly so everything is inline and neatly placed without covering up the next div while in the fixed position? Also any advice or tips is appreciated.
HTML:
<body>
<div id="fixed">
<p>Springathing</p>
<ul id="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="overall">
<div id="about">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="pageinfo">
</div>
<div id="copyright">
</div>
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
}
#nav {
list-style: none;
text-align: right;
}
#fixed {
background-color: #4F7BF7;
height: 60px;
width: 100%;
position: fixed;
}
#overall {
background-color: #5D6363;
}
#about {
background-color: #A2A2A2;
width: 500px;
height: 500px;
margin: 0 auto;
}
#portfolio {
background-color: #B8BBBB;
border-bottom: 1px solid gray;
width: 500px;
height: 500px;
margin: 0 auto;
}
#contact {
background-color: #B8BBBB;
width: 500px;
height: 500px;
margin: 0 auto;
}
#pageinfo {
background-color: #A2A2A2;
width: 100%;
height: 100px;
}
#copyright {
background-color: #4F7BF7;
width: 100%;
height: 50px;
}
I take it you're new to CSS? If you are, no worries, CSS can be a bit of a pain and takes a little getting used to.
I reproduced what you were trying to do and so here's what I'm going to do.
FIRST - I will provide a screenshot of what I managed to code.
SECOND - I will provide the code you need (which is only a few lines) to get the results I did.
THIRD - I will explain what is going on with the code.
Ok, first here is the screenshot of what my results were:
Ok, now for the code that got me this result...
HTML
<div id="fixed">
<p>Springathing</p>
<ul id="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="overall">
<div id="about">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="pageinfo">
</div>
<div id="copyright">
</div>
</div>
</body>
CSS
* {
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
#nav {
list-style: none;
text-align: right;
}
#fixed {
background-color: #4F7BF7;
height: 60px;
width: 100%;
position: fixed;
}
ul#nav {
width: 500px;
margin: auto;
}
ul#nav li {
display: inline-block;
}
ul#nav li a {
text-decoration: none;
}
#overall {
background-color: #5D6363;
}
#about {
background-color: #A2A2A2;
width: 500px;
height: 500px;
margin: 0 auto;
}
#portfolio {
background-color: #B8BBBB;
border-bottom: 1px solid gray;
width: 500px;
height: 500px;
margin: 0 auto;
}
#contact {
background-color: #B8BBBB;
width: 500px;
height: 500px;
margin: 0 auto;
}
#pageinfo {
background-color: #A2A2A2;
width: 100%;
height: 100px;
}
#copyright {
background-color: #4F7BF7;
width: 100%;
height: 50px;
}
And now for an explanation...
First of all, you will notice that I didn't change your HTML at all. What you needed all had to do with the CSS.
Basically I did 2 things. The first thing was I provided a little snippet of code to do a "soft browser reset", because I don't know what you're getting on your screen, what browser you are using, etc. The soft reset gives me some equal footing (and you) to be able to produce as nearly the same results from each other as possible.
The second thing I did was focus in on you "ul" element. I gave it the following:
same width as your other portfolio div elements
a margin of auto for the "ul" element so that it would be centered
I gave the "li" elements a display of in-line so that they would line up next to each other
I gave the "a" elements a text-decoration of none to get rid of the underlines
And there you have it. I hope that helps!
Lastly, I would recommend an exercise. What I did to learn CSS better/faster was, aside from youtube and online tutorials, I used "inspect element" from Google Chrome to look at simple websites and then I copied what I saw and found out WHY they did those things. I would also try to find templates and reverse engineer them. Like I said, it takes some time but it's worth it!
Good luck!
You're missing three things here:
Your header's <p> tag needs display: inline-block.
Your navigation <ul> needs to float: right.
Your navigation list item <li> tags need to have display: inline-block.
I've updated your code to include these three additions, and have created a new fiddle demonstrating what I believe you're looking for here.
Note that you also might want to add a bit of margin-right to #nav, and a bit of margin-left to #fixed p.
Hope this helps! :)
You could do a couple of things here.
Display the P and #nav as inline-block. And float the #nav right.
You can also remove the height: 60px so that the content controls the height.
body {
margin: 0;
}
#nav {
list-style: none;
text-align: right;
float: right;
margin: 0;
}
#fixed {
background-color: #4F7BF7;
height: 60px;
width: 100%;
position: fixed;
}
#overall {
background-color: #5D6363;
}
#about {
background-color: #A2A2A2;
width: 500px;
height: 500px;
margin: 0 auto;
}
#portfolio {
background-color: #B8BBBB;
border-bottom: 1px solid gray;
width: 500px;
height: 500px;
margin: 0 auto;
}
#contact {
background-color: #B8BBBB;
width: 500px;
height: 500px;
margin: 0 auto;
}
#pageinfo {
background-color: #A2A2A2;
width: 100%;
height: 100px;
}
#copyright {
background-color: #4F7BF7;
width: 100%;
height: 50px;
}
p,
#nav {
display: inline-block;
}
<div id="fixed">
<p>Springathing</p>
<ul id="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="overall">
<div id="about">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="pageinfo">
</div>
<div id="copyright">
</div>
</div>
You could do other things such as give the header a bit of padding and also display the #nav li inline-block if you want them next to each other rather than listed.
I have a project where I need to align certain elements just so. For whatever reason, it's not working. My HTML:
<div class="heading">
<h1>Exotic <strong>Travel</strong></h1>
<div class="left">
<ul>
<li>homepage</li>
<br>
<li>about us</li>
<br>
<li>destinations</li>
<br>
<li>book a ticket</li>
<br>
<li>contact us</li>
</ul>
</div>
<div class="rightimg">
<img src="banner.jpg" alt="Beachside Hotel" />
</div>
<div class="righttext">
<h2>The Perfect Destination</h2>
</div>
</div>
and the CSS:
body {
background-image: url(sky.jpg);
font-family: "Verdana", sans serif;
}
h1 {
font-family: "Calibri Light", sans serif;
color: gray;
}
h2 {
background-color: green;
display: inline-block;
border: 0;
margin: 0;
text-align: center;
width: 750px;
}
a {
color: white;
margin: 4px;
padding: 5px 0 5px 0;
text-decoration: none;
}
.left{
background-color: red;
display: inline-block;
float: left;
height: 200px;
width: 350px;
}
.heading {
background-color: white;
margin: 0 auto;
overflow: auto;
width: 1000px;
}
.righttext {
display: inline-block;
float: right;
height: 60px;
width: 750px;
}
.rightimg {
display: inline-block;
float: right;
margin: 0;
padding: 0;
width: 750px;
}
This SHOULD be working, based on other similar examples I've seen on the site, but it's not taking. Any help here would be appreciated.
I think you are breaking it with your fixed widths, I used 40% width on the left and righttext and that seemed to get everything inline:
.left{
background-color: red;
display: inline-block;
float: left;
height: 200px;
width: 40%;
}
.righttext {
display: inline-block;
float: right;
height: 60px;
width: 40%;
}
https://jsfiddle.net/bkyLojx4/
Also as an fyi br tags are not valid in a ul. Rather use css to handle the styling of the list.
It is because you have the elements at a fixed width which means the combined width of all 3 elements is more than the space available. Try using a percentile widths for adaptive design or adjusting it to the resolution you want to support.
Can someone take a look at my code please and tell me:
How can I get the image to go over the <header> and <nav> so that everything else centres properly. I have tried playing with z-index and nothing seems to work.
How do I get the <section> to start under the <nav> rather than right at the top of the page behind the other elements without using loads of <br>s?
#CHARSET "ISO-8859-1";
body {
font-family: "Comic Sans MS", cursive, sans-serif
}
header {
background-color: #ffd800;
color: black;
height: 119px;
width: 100%;
margin: -20px -10px;
min-width: 800px;
position: fixed;
margin: -20px -10px;
text-align: center;
}
.logo {
float:left;
width: 118px;
height: 118px;
margin-right: 50px;
}
header h2 {
min-width: 800px;
}
nav ul {
background-color: #ffd800;
text-align:center;
list-style: none;
width: 800px;
margin: 0 auto 0 auto;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 0 30px;
text-decoration: none;
}
nav a:hover {
color: white;
}
section {
width: 800px;
margin: 0 auto 0 auto;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px
}
section h3 {
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
<header>
<img class="logo" src="resources/img/chris.gif" alt="logo">
<br>
<h2>Web Design by Chris Atkinson</h2>
<nav>
<ul>
<li>home</li>
<li>projects</li>
<li>blog</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</header>
<section>
<br>
<br>
<br>
<br>
<h3>Welcome to my site</h3>
<p>Please take a good look around, and send me some feedback in
the 'contact' section. I'd love to hear from you</p>
</section>
</body>
</html>
Change these css properties and you should be able to get rid of all the breaks:
section {
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 100px 40px 5px 40px
}
.logo {
position: absolute;
width: 118px;
height: 118px;
z-index: 20;
}
No need to float left on the logo if you are doing an absolute position. Also, you you want to add top padding (the first value in the padding property) of your section to shift it down below the nav.
http://jsbin.com/woyilesoka/2/edit?html,css,output
You need to break your logo away from your other stuff. Make your logo position: absolute; and create a z-index greater than the divs below it. This way it's above your other divs, and not included in the divs. This will keep the rest of your stuff centered.
Directions:
.logo {
position: absolute;
z-index : 9000;
float:left;
width: 118px;
height: 118px;
}
then move the logo left.
You can make your logo position absolute so that the float of other elements do not interfere with your logo:
.logo {
position: absolute;
width: 118px;
height: 118px;
margin-right: 50px;
}
This is how your make your section below the nav bar by changing margin on the top of the section:
section {
margin: 2opx auto 0 auto;
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px;
}
I am trying to create a header that contains an image along with links that will act as a nav menu for users to navigate.I want the layout to look something like this.
However, I cant seem to get the alignment of the nav menu right to vertically align right above the underline in the header.
<header>
<div>
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link1
</li>
<li class="menuitem">
Link2
</li>
</ul>
</nav>
</header>
CSS:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid black;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
How do I keep the links to the right of the page along with moving them above the border? Any help would be greatly appreciated.
Your CSS snippet has some typos, it probably should be:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
border-bottom: 2px solid black;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
So you need to correct that.
Having a header that is 5% of the height of the page doesn't make a great deal of sense to me, and because the menuitem items are floated right, they don't have any block effect on the header content.
If you gave the header a fixed height that was big enough, e.g. height: 80px; then it would display as you want.
EDIT:
An alternative is to give the menuitems a relative position, then offset the top by the height of the image in the header (it's the only element with a fixed height), and apply the border to the div enclosing the header image (see http://codepen.io/raad/pen/oyncv):
HTML
<header>
<div class="imagecontainer">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link2
</li>
<li class="menuitem">
Link1
</li>
</ul>
</nav>
</header>
CSS
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
}
.imagecontainer {
border-bottom: 2px solid black;
}
.menuitem {
position: relative;
top: -36px;
display: inline;
float: right;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
Add this to your CSS:
#headernav {
float: right;
}
#headernav ul li {
display: inline;
}
This will float the nav to the right and display your list inline so each bullet is side-by-side.
JSFiddle: http://jsfiddle.net/tsukasadt/puf0ws3x/
Please see the following fiddle: http://jsfiddle.net/nfpzzao7/
<header>
<div class="headerimage-container">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link1
</li>
<li class="menuitem">
Link2
</li>
</ul>
</nav>
</header>
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid red;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
.headerimage-container {
display: inline-block;
}
#headernav {
display: inline-block;
}
#headernav li {
float: left;
margin-right: 10px;
}