I would like to place the middle portion div on top for a #media query -- and then I would like to stack the left portion and right portion divs below it side by side for a responsive and clean looking design, possibly for mobile as well.
Here is my code -- any help would be greatly appreciated! Thanks.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href="needhelpagain.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Arvo|Josefin+Slab|Lato|Old+Standard+TT|Open+Sans|PT+Sans|PT+Serif|Roboto|Ubuntu|Vollkorn|Dancing+Script">
<title></title>
</head>
<body>
<header></header>
<div class="container">
<div class="left-portion"></div>
<div class="middle-portion">Blank Content</div>
<div class="right-portion"></div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color:#1a0000;
}
.container{
margin:auto;
width:80%;
overflow:hidden;
background-color:white;
}
header{
padding:50px;
background-color:#000000;
}
.left-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
}
.middle-portion{
width:56%;
height:100%;
float:left;
background-color:#ffffff;
color:#000000;
font-family:'old standard tt';
text-align:center;
}
.right-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
font-family:'vollkorn';
}
You may be able to get away with making the div on top you have it labeled as left .. Make that 100% width then the other 2 divs set as 50% and the set all of the divs in the container to position relative. And the bottom divs to float left.
<style>
.container{
height: 1200px;
width: 100%;
}
.container div{
position: relative;
}
.topDiv{
width:100%;
height:100px;
}
.botDivs{
width:50%;
height: 200px;
float: left
}
.green{
background:green;
}
.red{
background:red;
}
.blue{
background:blue;
}
</style>
<div class="container">
<div class="topDiv red"></div>
<div class="botDivs green"></div>
<div class="botDivs blue"></div>
</div>
Related
I am trying to create a responsive header that has two adjacent background images, split diagonally.
The placement of the angle should be adjustable like so:
Most of the ways that this can be done result in the background image becoming skewed, using transparent borders that are not responsive or using clip-path, which unfortunately lacks browser support for ie.
.one,
.two {
flex: 1 1 auto;
}
.spotlight {
height:350px;
overflow:hidden;
}
.one, .two {
background: url(https://via.placeholder.com/150);
transform: skewX(-20deg)
}
.one {
}
.two {
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex spotlight">
<div class="one">a</div>
<div class="two">a</div>
</div>
codepen
Are there any other alternative ways of going about this?
body {
overflow:hidden;
}
.view {
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
-ms-transform:skew(-5deg);
-o-transform:skew(-5deg);
-moz-transform:skew(-5deg);
-webkit-transform:skew(-5deg);
transform:skew(-5deg);
}
.left,
.right {
bottom:0;
overflow:hidden;
position:absolute;
top:0;
}
.left {
left:-5%;
right:50%;
}
.right {
left:50%;
right:-5%;
}
.img {
bottom:-5%;
left:-5%;
position:absolute;
right:-5%;
top:-5%;
-ms-transform:skew(5deg);
-o-transform:skew(5deg);
-moz-transform:skew(5deg);
-webkit-transform:skew(5deg);
transform:skew(5deg);
}
.left-img {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
background-position:center center;
background-size:cover;
}
.right-img {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
background-position:center center;
background-size:cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="view">
<div class="left">
<div class="img left-img"></div>
</div>
<div class="right">
<div class="img right-img"></div>
</div>
</div>
</body>
</html>
Adjust position as you want on .right and .left class
Why is there a margin in the ul? The navbar goes directly below and out of the header when I float left or right. If I remove Ul it doesnt drop below. I dont understand it. How do I fix it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
html{
height:100%;
}
body{
height:100%;
width:100%;
background-color: grey;
margin:0;
padding:0;
}
#container{
width:80%;
margin:auto;
}
#header{
width:100%;
}
.navbar{
width:100%;
}
ul{
margin:0;
padding:0;
width:25%;
float:left
}
li{
display:inline;
}
There is no margin on the UL, it just appears that way as it is inside your container, which has margin: auto on it, which centers the #container element on your page and has 80% width.
Move your nav outside of the container if you want it to float to the left of the body, or use:
position: absolute;
left: 0;
width: 100%;
instead of floating it and it will go to the left of the nearest relative container (in this case the body as nothing is set with position: relative.
EDIT: Also, your links are not structured correctly:
<li>NAV1</li>
Should be: <li>NAV1</li> if you want NAV1 to be the text of the link
It's not about margin,because there is no margin, there is not enough space of ul. Im not sure what do you want to achieve but u can remove width: 25%; from ul.
Try this way.
html{
height:100%;
}
body{
height:100%;
width:100%;
background-color: grey;
margin:0;
padding:0;
}
#container{
width:80%;
margin:auto;
}
#header{
width:100%;
}
.navbar{
width:100%;
overflow: auto;
}
ul{
margin:0;
padding:0;
width:100%;
float:left;
}
li{
display:inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="navbar">
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I'm trying to make a site that scales properly based on browser size. I'm aware that usually requires to keep all width and heights set to 100%, however I have no clue how to set it when there's a minimum-height and minimum height for the header and footer. A school logo will be in the header which is unreadable when too small, and a google calendar in the sidebar.
What I'd like to do is set it up so that the header and subheader (dark blue and dark grey bars) are set to be a fixed position. The sidebar (black bar) set to fixed, as well as the footer (light grey). The content section (white box) I'd like to be the only scrollable section that contains all of the news and updates. No matter how I set it up something is always moving inappropriately.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
and the css
#header-container{
width:100%;
height:96px;
position:relative;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:100%;
position:relative;
padding-bottom:55px;
background-color:pink;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
add z-index:10 to #header-container....and all your problems will be solved!!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<style>
#header-container{
width:100%;
height:96px;
position:relative;
z-index: 10;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:1021px;
position:relative;
padding-bottom:55px;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
border: 10px solid red;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
</style>
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
I don't think you need all the position: relative; stuff in there if you're using floats. Another thing you can do is add "overflow: auto" to the content div and do "overflow: hidden" on the others. Have you looked into bootstrap. This is very easy if you're using bootstrap. Check out: http://getbootstrap.com/ , it makes this type of stuff very very easy.
I want to make a container in the middle of the screen and put some div itmes in.
I want sth like this.
I stripped down the html to its essentials for you people.
<!DOCTYPE HTML>
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Webshop</title>
<link href="../css/boilerplate.css" rel="stylesheet" type="text/css">
<style type="text/css">
#content {
position:relative;
width:200px;
height:115px;
background-color:#F00;
top: 900px;
margin:10px;
padding:10px;
display:inline-block;
}
#container {
max-width: 960px;
background: #FFF;
margin: 0 auto;
min-height:100%;
height: auto;
padding-top:0;
padding-left:1em;
padding-right:1em;
padding-bottom:0;
}
</style>
</head>
<body style="background-color:#CF6" >
<div id="container">
<div id="content"> </div>
<div id="content"> </div>
<div id="content"> </div>
</div>
</body>
</html>
The result is awful.
I dont really understand, what you want but have a look at this :
http://jsfiddle.net/u7k6cyf5/
#content {
position:relative;
width:200px;
background-color:#F00;
margin:10px;
padding:10px;
display:inline-block;
}
I have a problem that I can't solve. I want my main div to expand vertically when its child div is filled with content, but couldn't make it. When I add lorem text to the left div, it expands if the text contains more than its original width, but the main div isn't expanding. How can I solve that problem?
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
</html>
CSS
#main{
background-color:#ff8f79;
width:900px;
min-height:400px;
margin:0 auto;
position:relative;
}
#left{
position:relative;
width:300px;
min-height:300px;
float:left;
background-color:blue;
}
#middle{
width:300px;
height:300px;
float:left;
background-color:green;
}
#right{
width:300px;
height:300px;
float:left;
background-color:black;
}
add this to css
#left, #middle, #right {
word-wrap: break-word;
}
keeps all the text within each individual box and they expand and also expand the main