I'm trying to create my first website, and I'm wanting to make a section in which the recent posts are on the left, and the sidebar is on the right. I'm not having any problems with positioning them but the problem is that the main div isn't drawing the background for it.
If I put any raw-text in the div, it will draw the background correctly for the raw-text, but not for any of the <div>'s inside of it.
Please note, in the code snipit the text is white, and body has a black background, the page-content div is supposed to have a grey background #666 but it's not showing up.
body {
background: #000;
}
/* Page Content */
#page-content {
background:#666;
color: #FFF;
opacity: .8;
}
#recent-updates {
width: 75%;
float: left;
}
#sidebar-right {
width: 25%;
float: right;
}
<html>
<body>
<div id='page-content'>
<div id='recent-updates'>
OneOneOneOneOneOneOne
</div> <!-- recent-updates -->
<div id='sidebar-right'>
TwoTwoTwoTwoTwoTwoTwo
</div> <!-- sidebar-right -->
</div> <!-- page-content-->
</body>
</html>
Because you have floated the elements inside #page-content, you have taken them out of the normal flow of the page. #page-content has no contents in the normal flow, so it collapses on itself and you can't see the background colour given to it.
You can clear your floated elements with an overflow trick:
body {
background: #000;
}
#page-content {
background:#666;
color: #FFF;
opacity: .8;
overflow: hidden;
}
#recent-updates {
width: 75%;
float: left;
}
#sidebar-right {
width: 25%;
float: right;
}
<html>
<body>
<div id='page-content'>
<div id='recent-updates'>
OneOneOneOneOneOneOne
</div> <!-- recent-updates -->
<div id='sidebar-right'>
TwoTwoTwoTwoTwoTwoTwo
</div> <!-- sidebar-right -->
</div> <!-- page-content-->
</body>
</html>
If you aren't able to apply overflow: hidden to #page-content, see other float-clearing methods.
Also you can do this just add div with style clear both floats so it will automatically settled.
body {
background: #000;
}
#page-content {
background:#666;
color: #FFF;
opacity: .8;
overflow: hidden;
}
#recent-updates {
width: 75%;
float: left;
}
#sidebar-right {
width: 25%;
float: right;
}
.clear
{
clear:both;
}
<html>
<body>
<div id='page-content'>
<div id='recent-updates'>
OneOneOneOneOneOneOne
</div> <!-- recent-updates -->
<div id='sidebar-right'>
TwoTwoTwoTwoTwoTwoTwo
</div> <!-- sidebar-right -->
<div class="clear"> </div>
</div> <!-- page-content-->
</body>
</html>
Related
I know this is a common problem, but I can't get my header the same size like my screen.
I already tried to wrap the header into another div and make width: 100%. This didn't help.
Thanks for your help!
body {
font-family: 'avenirregular';
padding: 0;
margin: 0;
background-color: #f4f4f4;
width: 100%
}
/* Global */
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
/* Header **/
header {
background: #16205E;
color: #ffffff;
padding-top: 30px;
min-height: 7.5vh;
border-bottom: #2B8AFF 3px solid;
display: table-cell;
vertical-align: middle;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
vertical-align: top;
padding: 0 20px 0 20px;
}
header #branding {
width: 20%;
float: left;
padding-top: 0px;
padding-bottom: 20px;
}
header #home img {
width: 100%;
height: 100%;
}
header nav {
float: right;
margin-top: 20px;
}
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'></a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
Just remove the display:table-cell from the header
body{
font-family: 'avenirregular';
padding:0;
margin:0;
background-color:#f4f4f4;
width:100%
}
/* Global */
.container{
width:85%;
margin:auto;
overflow:hidden;
}
/* Header **/
header{
background:#16205E;
color:#ffffff;
padding-top:30px;
min-height:7.5vh;
border-bottom:#2B8AFF 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li{
float:left;
display:inline;
vertical-align:top;
padding: 0 20px 0 20px;
}
header #branding{
width:20%;
float:left;
padding-top:0px;
padding-bottom:20px;
}
header #home img{
width:100%;
height:100%;
}
header nav{
float:right;
margin-top:20px;
}
<body>
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'</a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
</body>
I have a good convention for you to follow which I have designed for myself and it works pretty well. Look Below.
Side-Note: I would remove the UL list. And just use links straight up then you can use CSS to style your menu links. it will make your life easier.
Every page must have a wrapper div to wrap all of your html.
Then inside your wrapper you can manage your content. But your wrapper must always have a width of 100%, and your box-width will will never be full width, the name explains it's purpose. This standard allows you to control your pages full width content such as banner or whatever you may want full width at any level on the page. And then if you have something like text content you use the box-width style class to center you content.
The way in which I have left the code for you will also take mobile into consideration, responsive design is important. But you can optimize it however you feel. :)
To get all your elements inline, investigate these functionalities based on what works best for you.
https://www.w3schools.com/css/css_inline-block.asp ->inline-block
and
https://www.w3schools.com/css/css_float.asp ->float
Then apply the appropriate style to your div elements inside the surrounding div.
<div class="wrapper">
<!-- Header Div -->
<div class="header">
<!-- Your header Content goes here -->
</div>
<!-- Body Div -->
<div class="body box-width">
<!-- Your body Content goes here -->
<!-- This body will be box width -> 1200px -->
</div>
<div class="body-2">
<!-- Your body Content goes here -->
<!-- This body will be full width -->
</div>
<!-- Footer Div -->
<div class="footer">
<!-- Your footer Content goes here -->
</div>
</div>
<style type="text/css">
#media only screen and (min-width: 1024px) {
.wrapper{
width: 100%;
max-width: 100%;
}
.box-width{
width: 1200px;
max-width: 100%;
margin: 0px auto;
}
}
#media only screen and (max-width: 1023px) {
.box-width {
max-width: 90%;
margin: 0px auto;
}
}
</style>
header{
display:inline-block;
width:100%;
}
You have display: table-cell; that means it baheve like table cell... and table cells are content related. You can just remove it and then your header will be display:block that means its automaticly 100%. Retrospectively my answer is not as good as the other one here... so just remove display:table-cell.
There is a large white gap between the first row of columns and the second row.
JSFiddle: https://jsfiddle.net/5o3ug26g/
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style>
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar { width: 160px; height: 600px; }
.left { float: left; background: forestgreen; }
.right { float: right; background: steelblue; }
</style>
</head>
<body>
<div>
<div class="left sidebar"></div>
<div class="right sidebar"></div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Text on top of the page</div>
<div class="col-md-6">Other text on top of the page</div>
</div>
<div class="row">
<div class="col-md-6">I want this to be right below the "Text on top of the page" but it isn't...</div>
<div class="col-md-6">... and I want this to be right below the "Other text on top of the page" but it isn't</div>
</div>
</div>
</div>
</div>
</body>
</html>
If I remove the row classes then the gap disappears, but this problem appears also when using Bootstrap navbar-s and other containers with :after { display: table; }, so just removing the row classes is not a solution.
I tried adding clearfix in a bunch of places but to no avail.
This is an extract from a more complex responsive layout and I'd rather avoid refactoring it all.
What is the easiest fix?
You can position your left and right sidebars absolutely instead of floating them. The floats are interfering with the bootstrap layout.
.left { background: forestgreen; position:absolute; left:0; top:0; }
.right { background: steelblue; position:absolute; right:0; top:0;}
Live example forked from yours: https://jsfiddle.net/5fk5900s/1/
Marcelo is correct. You've already added margins to the content to account for the side bars. Here is a fiddle with the absolute positioning changes:
https://jsfiddle.net/5o3ug26g/1/
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar {
position: absolute;
width: 160px;
height: 600px;
}
.left {
left: 0px;
background:
forestgreen;
}
.right {
right: 0px;
background: steelblue;
}
I am new to HTML/CSS. I want a horizontal strip of the screen to be black, on a red background. Using CSS, I define a wrapper with a black background and a body with a red background.
Unfortunately, when there's a horizontal scrollbar, the wrapper only takes up the part of the page that can be seen with the scrollbar at the extreme left. The area of the page to the right of this is entirely red.
Here is the relevant HTML and CSS:
<div id="wrapper">
<div id="page" class="container">
<div id="content">
<h2 class="title">Foo</h2>
<div class="Body">
<p>Bar</p>
</div>
</div>
</div>
</div>
#wrapper {
background-color: #000000;
}
.container {
width: 1000px;
margin: 0px auto;
}
#page {
padding-top: 280px;
}
#content {
float: left;
width: 620px;
padding-right: 40px;
}
body {
margin: 0;
background: #FF0000;
}
you need to specify the minimum width for div #wrapper
#wrapper {
min-width: 1000px;
}
I have 2 divs on my page that I want to appear with one centred relative to the page (the page title) and the other floated to the right (a navigation bar). I can't get the title centred relative to the page. The best I can do is have it centred relative to the space remaining to the left of the navigation bar.
This demonstrates the problem I'm having.
<style>
.page {
width: 400px;
margin: 0 auto;
background: red;
}
.navbar {
float: right;
}
.title {
text-align: center;
}
</style>
<div class='page'>
<div class='navbar'>
navbar
</div>
<div class='title'>
<h1>TITLE GOES HERE</h1>
</div>
</div>
Is there a simple solution to this?
How is this?
<style>
.page {
width: 400px;
margin: 0 auto;
background: red;
position:relative;
}
.navbar {
position:absolute;
right:2px;
}
.title {
text-align: center;
}
</style>
<div class='page'>
<div class='navbar'>
navbar
</div>
<div class='title'>
<h1>TITLE GOES HERE</h1>
</div>
</div>
I have created two rounded corner boxes which i would like to be aligned next to each other .But the 2nd box is appearing directly below the first one inspite of me using float:left on the 1st one. Any way to fix this would be really helpful. Below are the html and the css.
The HTML :
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="layout.css"/>
</head>
<body>
<div id="containerDiv">
<!-- Box 1 -->
<div id="box1" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
<!-- Box 2 -->
<div id="box2" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
</div>
</body>
</html>
The CSS :
#containerDiv {
width: 1000px;
}
.boxDiv {
width: 248px;
}
.upperRound {
background-image: url('rounded_upper.gif');
height: 20px;
}
.lowerRound {
background-image: url('rounded_lower.gif');
height: 20px;
}
.boxContent,.boxTagLine {
border-left: 2px solid #B5B5B5;
border-right: 2px solid #B5B5B5;
padding: 10px;
background-color:#F8F8F8;
solid #B5B5B5;
}
.boxTagLine {
color:#0066FF;
}
#box1 {
float:left;
}
Second div must float to right and next element should clear float. I'll add more info in a second.
I was a bit wrong. You even don't need clearing div.
Check out this question.
So - in your case, add this to css=>
#box2 {
float:right;
}
#containerDiv {
width: 1000px;
overflow: hidden;
}
I didn't try it, but it should work.
Mine approach will leave space between boxes. So - it might be not desired effect.
You would be better off using spans
But if you have to use divs :
.boxDiv {
width: 248px;
display: inline;
}
float both boxes left:
#box1,#box2 {
float:left;
}
You'd be better off floating your .boxDiv left, like so:
.boxDiv {
width: 248px;
float: left;
}
That way if you add more boxes they'll float straight away, otherwise you'd have add the specific class names:
#box1, #box2, #box3, #box4 {
float:left;
}