I have tried this. But it doesn't work. I don't know why it makes the parent div appear like that. I want the divisionContainer to contain them. But it doesn't appear like that.
* {
box-sizing: border-box;
}
body {
font-family: arial;
}
.mainContainer {
border: 1px solid #000;
width: 65%;
}
.header {
width: 100%;
height: 85px;
background: #19578c;
}
.header .container {
padding: 5px;
float: right;
}
.header .headerTitle {
color: #4e94d0;
;
font-family: monospace;
margin: 0;
font-size: 300%;
}
.header .navBar li {
display: inline;
padding: 5px;
}
/* here's the problem */
.divisionContainer {
border: 1px solid #000;
margin-top: 2px;
}
.sidebarContainer {
width: 30%;
float: left;
}
.contentContainer {
width: 70%;
float: right;
}
/* here's the problem */
.navBar {
list-style: none;
padding: 0;
margin: 5px 0 0 0;
color: white;
}
<html>
<head>
<title>thepoopstation</title>
</head>
<body>
<div class="mainContainer">
<div class="header">
<div class="container">
<h1 class="headerTitle">[thepoopstation]</h1>
<ul class="navBar">
<li>home</li>
<li>search</li>
<li>global</li>
</ul>
</div>
</div>
<div class="divisionContainer">
<div class="sidebarContainer">
<div class="container">
<ul class="navBar">
<li>my profile</li>
<li>my friends</li>
</ul>
</div>
</div>
<div class="contentContainer">
<div class="container">
<div class="containerHeading">about thepoopstation</div>
<div>
</div>
</div>
</div>
</body>
</html>
It appears as if the parent divisionContainer is not containing them at all. I wanna fix it.
It because how float works...floated elements are out of flow..so you will need to put a in-flow elements below that div to enforce the parent div to take all the inner element space using :after pseudo element
Stack Snippet
* {
box-sizing: border-box;
}
body {
font-family: arial;
}
.mainContainer {
border: 1px solid #000;
width: 65%;
}
.header {
width: 100%;
height: 85px;
background: #19578c;
}
.header .container {
padding: 5px;
float: right;
}
.header .headerTitle {
color: #4e94d0;
;
font-family: monospace;
margin: 0;
font-size: 300%;
}
.header .navBar li {
display: inline;
padding: 5px;
}
/* here's the problem */
.divisionContainer {
border: 1px solid #000;
margin-top: 2px;
}
.sidebarContainer {
width: 30%;
float: left;
}
.contentContainer {
width: 70%;
float: right;
}
/* here's the problem */
.navBar {
list-style: none;
padding: 0;
margin: 5px 0 0 0;
color: white;
}
.divisionContainer:after {
content: "";
display: table;
clear: both;
}
<div class="mainContainer">
<div class="header">
<div class="container">
<h1 class="headerTitle">[thepoopstation]</h1>
<ul class="navBar">
<li>home</li>
<li>search</li>
<li>global</li>
</ul>
</div>
</div>
<div class="divisionContainer">
<div class="sidebarContainer">
<div class="container">
<ul class="navBar">
<li>my profile</li>
<li>my friends</li>
</ul>
</div>
</div>
<div class="contentContainer">
<div class="container">
<div class="containerHeading">about thepoopstation</div>
<div>
</div>
</div>
</div>
</div>
</div>
Related
I'm new to HTML and CSS, I don't know where is the mistake in my code.
So I have a class header-text to show "Welcome to MOK VPS" with h1.
I used float:left; on my CSS code but it stills show the text on the center. But if I use float:right; it moves to the right.
I'm just messing around with HTML and CSS after learning it a few hours and reviewing what I learned.
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
}
.header-home {
height: 75px;
background-color: rgba(23, 32, 42, 0.7);
color: #CCD1D1;
}
.header-logo {
float: left;
padding: 20px;
margin-right: 20%;
}
.header-list li {
list-style: none;
float: left;
padding: 25px;
}
.header-login {
padding-top: 25px;
padding-right: 45px;
float: right;
}
.body-text {
float: left;
}
<div class=header-home>
<div class=header-logo>
<h1>MOK VPS</h1>
</div>
<div class=header-list>
<ul>
<li>Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
<div class=header-login>
<p>LOGIN</p>
</div>
</div>
<div class=body>
<div class=body-text>
<h1>Welcome to MOK VPS</h1>
</div>
</div>
I've added borders around the elements to illustrate what is happening here. Click Run code snippet to see.
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
/* adding for demonstration */
border: 1px solid;
}
.header-home {
height: 75px;
background-color: rgba(23, 32, 42, 0.7);
color: #CCD1D1;
}
.header-logo {
float: left;
padding: 20px;
margin-right: 20%;
}
.header-list li {
list-style: none;
float: left;
padding: 25px;
}
.header-login {
padding-top: 25px;
padding-right: 45px;
float: right;
}
.body-text {
border-color: lime;
float: left;
}
<div class=header-home>
<div class=header-logo>
<h1>MOK VPS</h1>
</div>
<div class=header-list>
<ul>
<li>Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
<div class=header-login>
<p>LOGIN</p>
</div>
</div>
<div class=body>
<div class=body-text>
<h1>Welcome to MOK VPS</h1>
</div>
</div>
If you look closely, you'll see that the body-text div is actually caught on the header-home div. To prevent that, use clear to cause your div to go to the next line, after any previously floated elements.
* {
margin: 0;
padding: 0;
border: none;
font-family: Arial, sans-serif;
/* adding for demonstration */
border: 1px solid;
}
.header-home {
height: 75px;
background-color: rgba(23, 32, 42, 0.7);
color: #CCD1D1;
}
.header-logo {
float: left;
padding: 20px;
margin-right: 20%;
}
.header-list li {
list-style: none;
float: left;
padding: 25px;
}
.header-login {
padding-top: 25px;
padding-right: 45px;
float: right;
}
.body-text {
border-color: lime;
float: left;
clear: left;
}
<div class=header-home>
<div class=header-logo>
<h1>MOK VPS</h1>
</div>
<div class=header-list>
<ul>
<li>Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
<div class=header-login>
<p>LOGIN</p>
</div>
</div>
<div class=body>
<div class=body-text>
<h1>Welcome to MOK VPS</h1>
</div>
</div>
Just change in your CSS for class body-text. "Absolute positioned" element has no positioned ancestors, it uses the document body, and moves along with page scrolling.:
.body-text {
position:absolute;
}
You can simple add the position:absolute on your class body-text. Just add that get you problem fixed. But you also can make this:
.body-text {
position: absolute;
left: ***** Here you define how much you wanna move the tag, for example 20px***
}
You need to style <h1>. Like text-align: left;.
h1{
float: left;
text-align: left;
display: inline-block; /*use this code if needed. It can be replaced with text-align*/
}
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
How can I horizontally center an element?
(133 answers)
Closed 5 years ago.
I've looked at several posts here on stackoverflow and can't find an answer that solves my issue. The issue appears to be the same as many other questions, with the simple difference that I am trying to center text that will change and I want it perfectly centered.
Below is a a basic example of what I have currently; the text on the bottom is centered between the text on the left and right, where as the text on the top is centered in the DIV. The text on the bottom should reflect the same.
I have tried a multitude of solutions, from display: inline block (which decreases my spacer width) to margin: 0 auto, all the way to converting the containing div to display: table-cell, vertical align middle.
Any help will be greatly appreciated!
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus { text-align: center; }
.left { float: left; }
.right { float: right; }
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="left">
<li class="active">ASDF</li>
</ul>
<ul class="right">
<li class="active">POV - ASR</li>
</ul>
<ul>
<li class="active">LKJHGFDSAPOIURTQAJK</li>
</ul>
<div class="spacer"></div>
</div>
</div>
EDIT
This post is not able to use the answers utilized in both related questions; though they are similar in nature, setting a specific width for my LI elements to achieve perfect center is not possible with pure CSS (SCSS maybe but not CSS3). The display: table answer did not work for me. Hence the reason I asked it as a new question; I tried 15 different suggested answers before posting my question.
I would put the 3 links in the footer in a single ul, use display: flex on the ul, and flex: 1 0 0 on the li's so they'll take up the same amount of space, then use text-align in each li to position the text.
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide,
li {
display: none;
}
.active {
display: block !important;
}
.header {
text-align: center;
}
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus {
text-align: center;
}
/* new stuff */
.bottom {
display: flex;
}
.bottom li {
flex: 1 0 0;
}
.bottom li:first-child {
text-align: left;
}
.bottom li:last-child {
text-align: right;
}
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="bottom">
<li class="active left">ASDF</li>
<li class="active left">LKJHGFDSAPOIURTQAJK</li>
<li class="active left">POV - ASR</li>
</ul>
<div class="spacer"></div>
</div>
</div>
If you don't want your left and right items to effect the positioning of the center item, you can take them out of the flow by using position: absolute;.
With this in place, you can align them using left or right.
ul.left, ul.right {
position: absolute;
}
ul.left {
left: 0;
}
ul.right {
right: 0;
}
Working example:
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus { text-align: center; }
ul.right {position: absolute; right: 0;}
ul.left {position: absolute; left: 0;}
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="left">
<li class="active">ASDF</li>
</ul>
<ul class="right">
<li class="active">POV - ASR</li>
</ul>
<ul>
<li class="active">LKJHGFDSAPOIURTQAJK</li>
</ul>
<div class="spacer"></div>
</div>
</div>
I've removed your float properties because with this implementation, they are no longer necessary.
I need some assistance with my code I am looking to creating a footer with four equal columns, right now the fourth column in spaced too far to the right, any assistance you can provide is appreciated.
#footer {
background: #E5E0DD;
margin: auto;
min-width: 860px;
padding: 0;
}
#footer div {
margin: 0 auto;
overflow: hidden;
padding: 26px 0 0;
width: 960px;
}
#footer div div {
margin: auto;
padding: 0;
text-align: left;
width: 240px;
}
#footer div div h3 {
color: #000;
font-size: 12px;
font-weight: bold;
margin: 0 0 5px 0;
padding: 0;
text-transform: uppercase;
}
#footer div div ul,
#footer div div ul li {
margin: auto;
list-style: none;
padding: 0;
}
#footer div div ul li {
font-size: 12px;
line-height: 22px;
color: #06C;
}
#footer div p {
color: #c1c1c1;
font-size: 10px;
margin: left;
padding: 0 0 2px 0;
text-align: right;
text-shadow: 1px 1px 1px #fff;
}
<div id="footer">
<div>
<div>
<h3>Policies & Directives</h3>
<ul>
<li><span class="ms-rteThemeForeColor-5-4">
</span></li>
</ul>
</div>
<div>
<h3>In the know...</h3>
<ul>
<li><span class="ms-rteThemeForeColor-5-4">
<!-- FAQs- Select and move from comments based on appropriate
page-->
<a href="#"
</span></li>
</ul>
</div>
<div>
<!-- Centers -->
<h3>Centers</h3>
<ul>
<li><span class="ms-rteThemeForeColor-5-4">
FAQs<br/>
<!-- Glossary -->
</span></li>
</ul>
</div>
<div>
<!-- About -->
<h3>About</h3>
<ul>
<li><span class="ms-rteThemeForeColor-5-4">
Mission Statement<br>
Overview<br>
Organizational
</span></li>
</ul>
</div>
</div>
</div>
This was unnecessary and difficult for no reason. I need help with my code. I am looking for columns equally spaced.
I'm going to give you the basic building blocks and the following methods you can go about achieving this:
Float Method
Inline-Block Method
Flex Method
.footer-col {
min-height: 200px;
width: 25%;
background: #ddd;
border: 1px solid white;
box-sizing: border-box;
}
.float .footer-col {
float: left;
}
footer#footer {
margin-bottom: 20px;
clear: both;
overflow: auto;
}
.inline-block .footer-col {
display: inline-block;
max-width: 24.5%;
}
#footer.flex {
display: flex;
}
h3 {
border-top: 1px solid #ddd;
padding-top: 15px;
}
h3:first-of-type {
border: 0px;
padding: 0px;
}
<h3>Float Method</h3>
<footer id="footer" class="float">
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
</footer>
<h3>Inline-Block Method</h3>
<footer id="footer" class="inline-block">
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
</footer>
<h3>Flex Method</h3>
<footer id="footer" class="flex">
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
</footer>
The rest is up to you!
There are at least 4 ways to create an element with children that are evenly divided. Inline-block, tables, floats, and flex-box.
Inline-block has a funny space to account for between them... so, 25% will not work as you expect. Tables are for data(in my opinion). Floats are great, but they take themselves our of the document flow in a way you need to understand well. Flex-box is probably the most versitile, but you need to be aware of the browser prefixes or use autoprefixer. Here is an example of both floats and flex-box.
https://jsfiddle.net/sheriffderek/fbatsw02/
Markup
<footer class="site-footer floats">
<div class="inner-w">
<ul class="module-list">
<li class="module">one</li>
<li class="module">two</li>
<li class="module">three</li>
<li class="module">four</li>
</ul>
</div>
</footer>
<footer class="site-footer flex-box">
<div class="inner-w">
<ul class="module-list">
<li class="module">one</li>
<li class="module">two</li>
<li class="module">three</li>
<li class="module">four</li>
</ul>
</div>
</footer>
Styles
* {
box-sizing: border-box;
margin: 0;
}
.site-footer .inner-w {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.module-list {
list-style: none;
margin: 0;
padding: 0;
}
.module {
padding: 1rem;
}
/* with floats */
.site-footer.floats {
background: wheat;
overflow: hidden; /* fixes how the inner float collapses this element */
}
.site-footer.floats .module {
width: 25%;
float: left;
}
/* with flexbox */
.site-footer.flex-box {
background: lightgreen;
}
.site-footer.flex-box .module-list {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.site-footer.flex-box .module {
flex-basis: 25%;
}
Please help, I need the white space on the right bar gone and the position of the main content placed at the middle of the page.
What should I do? Any suggestion?
This is my site : http://www.plebonline.co.uk
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
.leftbar {
float: left;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.rightbar {
float: right;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.maincontent {
padding: 0;
float:left;
margin-left: 10%;
margin-right: 10%;
background-color: #ff00ff;
width: 80%;
}
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
There is a div tag close without opening that may be causing the problem.
Change:
<div class="leftbar"></div>
<div class="maincontent"></div>
</div>
<div class="rightbar"></div>
To:
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
I notice that you didn't put your rightbar and leftbar in any div. In my code here, I remove the right and left bar. You can adjust the code if you want them back.
It's better to add some container to hold all of your element. As you notice the header and the maincontent is inside the div class .container.
Hope this help.
html,body {
margin:0;
padding:0;
height: 100%;
/*
* The container which hold the header and the main content
*/
.container {
width:100%;
position: absolute;
height:1200px;
background:#333;
}
/*
* Header which contain your menu and date
*/
.header {
width:100%;
}
/*
* The main content of your site
*/
.maincontent {
width:80%;
max-width:1000px;
background-color: #fff;
float:left;
left:50%;
height:100%;
margin-left:-500px;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
</style>
<body>
<div class="container">
<div class="header">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
</div>
<div class="container">
<div class="maincontent">
<h1>This is the content</h1>
</div>
</div>
</body>
I have just started my website, and I am currently working on the header/navigation bar. I've got it looking how I want, however the one thing I can't figure out, is how to centre the logo and hyperlinks vertically in the header?
Here is my HTML:
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><img src="logo.png"></h1>
</div>
<div class="nav">
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="content">
<p>
</p>
</div>
</body>
And CSS:
body {
font-family: 'Nunito', sans-serif;
width: 100%;
margin: auto;
background: #F4F4F4;
}
a {
text-decoration: none;
color: #fff;
}
img {
max-width: 100%;
}
/**********************************
HEADING/NAVIGATION
***********************************/
li {
list-style: none;
float: left;
margin-left: 25px;
padding-top: 10px;
}
.container {
width: 960px;
margin: 0 auto;
}
.header {
background: #5BBB9B;
width: 100%;
height: 200px;
top: 0;
position: fixed;
border-bottom: 1px solid black;
}
.logo {
float: left;
}
.nav {
float: right;
}
I have tried using vertical-alignment: middle;, however this didn't work.
Anyone have any suggestions?
Use
display:table;
height:100%;
for the parent and
display: table-cell;
text-align: center;
vertical-align: middle;
and check out this awesome article:
https://css-tricks.com/centering-in-the-unknown/