I have a fixed header and right aside of 260px. I have three columns with height 100%.The content area to be a fluid-container that is 12 column wide.
<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
Below is the fiddle i am working on. The width of the cols are breaking with the layout.
http://codepen.io/anon/pen/qxusJ
Not really clear what you mean by The width of the cols are breaking with the layout.
Try it this way :
html, body, .container {
height:100%;
width:100%; /*keep html and body 100% */
margin:0;
background:lightgray
}
.container {
display:table;
width:calc(100% - 260px);/*keep container 100% - 260px */
border-spacing:0.5em;
}
I don't quite understand; you want the container to be fluid, but then you have columns within it that have a fixed width?
How you could do it is:
<div class="header"></div>
<div class="container">
<div class="secondary-aside"></div>
<div class="content">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
With the following CSS:
html, body {
height: 100%;
}
.header {
height: 60px;
background: blue;
width: 100%;
}
.container {
overflow: auto;
height: 100%;
}
.secondary-aside {
width: 25%;
float: right;
background: red;
height: 100%;
}
.content {
width: 75%;
float: left;
background: #777;
overflow: auto;
height: 100%;
}
.col-sm-4 {
height: 100%;
background: yellow;
width: 33.3333%;
float: left;
}
Would that help?
I don't understand why you use so much of custom styles in BS.
Check the responsiveness of the page in http://www.responsinator.com/
Check this out.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.secondary-aside {
width: 25%;
float: right;
background: #000000;
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="header">i am the header</div>
<div class="secondary-aside col-sm-4">ff</div>
<div class="col-sm-8">
<div class="col-sm-4" style="background-color: red">r</div>
<div class="col-sm-4"style="background-color: green">g</div>
<div class="col-sm-4"style="background-color: blue">b</div>
</div>
</div>
</body>
</html>
Related
I am newbie with CSS; so, I do not want to use CSS frameworks.
After reading some questions about fixed header and footer with CSS (on StackOverflow), I tried to create a HTML layout, as this:
In this layout, both header and menu are fixed.
I have created an HTML file with 2 column: left for menu, right for content. But, it comes with an scrolled-menu:
#menu {
width: 33%;
height: 100%;
float: left;
}
#page {
width: 66%;
height: 100%;
float: left;
}
#header {
width: 100%;
height: 100px;
position: fixed;
}
#content {
width: 100%;
position: absolute;
top: 100px;
}
#footer {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
<div id="menu">
MENU
</div>
<div id="page">
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
</div>
When I add this line: position: fixed; in #menu, the layout will be broken. Could help help me to fix it?
Currently you could use the Tag directly as <header> <body> <footer> you need to establish position : block. I would like to recommend that you uses a Framework like Bootstrap, today is commonly uses for design webpages, if you are new un webpages it Will be useful for you
http://getbootstrap.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 2 Unequal Column Layout for Tablets and Desktops</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.row > div{
margin-bottom: 15px;
}
.header{
min-height: 90px;
}
.footer{
min-height: 60px;
}
.header, .footer{
background: #2f2f2f;
}
.sidebar{
background: #dbdfe5;
}
.content{
background: #b4bac0;
}
.sidebar, .content{
min-height: 300px;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="sidebar"></div>
</div>
<div class="col-sm-9">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="footer"></div>
</div>
</div>
</div>
</body>
</html>
I have a a webpage that currently has a navigation bar on the top. I have been trying to create a layout underneath the navigation bar such as this:
Now left will be a "button" but really just a DIV that will be used to do something. Only one of the "Right" placeholders will actually contain text and the rest will be blank.
My issue is that I am not able to create this layout as I have in the picture. The closest I get is each "row" of left and right with now spacing between them.
Currently I have this for my code:
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Josh Schweigert - Contact</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<script src="contact.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="contact.css">
</head>
<body>
<div id="cssmenu">
<ul>
<li>Home
</li>
<li>Embedded Systems
</li>
<li class="active">Contact
</li>
</ul>
</div>
</body>
</html>
Note that the formatting will be screwed up as I did not include the CSS code.
I have tried making an "outter" div and inside that div have "container" div's which then hold a div for "left" and a div for "right" sort of like this:
#outter {
Position: Relative;
}
.container {
position: relative;
}
.left {
float: left;
width: 30%;
}
.right {
float: left;
width: 70%;
}
<div id="outter">
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</div>
But I am still not getting the result I want and I am thoroughly confused on how to achieve this layout. I appreciate any help!
I achieved this by making the following changes to your code:
Removed unnecessary position: relative; statements. They weren't doing anything in this context.
Removed floats
Changed .left and .right to display: inline-block;
Removed whitespace between divs as inline block is whitespace sensitive.
However this mightn't be the best solution because it's very unclear what your end goal is. If the idea is for the left column to be a vertical navbar then you would want that contained in its own element, and the main content in another. But again, it's not clear what the intent of the design is so I did it in as few changes as possible.
The box-sizing and other styles are just prettification so you can see that the code does lay out as specified in your image.
div {
box-sizing: border-box;
}
.left
{
width: 30%;
display: inline-block;
background-color: purple;
color: #fff;
padding: 15px;
}
.right
{
width: 70%;
display: inline-block;
background-color: red;
color: #fff;
padding: 15px;
}
<div id="outter">
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
</div>
Please get your HTML structure correct to begin with. Also I made changes to your code to get the alignment you require here.
You need something like this:
.navbar {
background-color: #5983ff;
height: 35px;
width: 100%;
text-align: center;
margin-bottom: 15px;
}
.navbar-child {
width: 30%;
display: inline-block;
color: #fff;
font-size: 16px;
line-height: 35px;
}
.container {
margin-bottom: 15px;
height: 30px;
line-height: 30px;
border:2px solid #dd00ff;
}
.left {
float: left;
padding-left: 20px;
width: 15%;
color: #fff;
background-color: #dd00ff;
box-sizing: border-box;
}
.right {
float: left;
padding-left: 50px;
width: 85%;
color: #fff;
background-color: #ff0000;
box-sizing: border-box;
}
<div class="navbar">
<div class="navbar-child">
Home
</div>
<div class="navbar-child">
About
</div>
<div class="navbar-child">
Contact
</div>
</div>
<div class="body-section">
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
</div>
You could use flex with box-sizing: border-box:
.wrap{
display: flex;
flex-wrap: wrap;
}
nav, section, aside{
padding: 0.5rem;
}
nav{
width: 100%;
background: yellowgreen;
display:flex;
justify-content: space-around;
}
aside{
width: 30%;
background: blueviolet;
box-sizing: border-box;
}
section{
min-width: 70%;
background: pink;
box-sizing: border-box;
}
<div class="wrap">
<nav>
<div>Home</div>
<div>Forum</div>
<div>Contact</div>
</nav>
<aside>left</aside>
<section>right</section>
<aside>left</aside>
<section>right</section>
<aside>left</aside>
<section>right</section>
</div>
width: 100% gives the nav full width, flex warp let other items under it, box-sizing lets you give the exact width for left and right
You can read more on flex here.
Also a post of mine that might help you understand
Try this:
<div class="container">
<div class="left">
left
</div>
<!--Remove this space -->
<div class="right">
right
</div>
</div>
I'm trying to make two full height bootstrap columns like the example here : Twitter bootstrap 3 two columns full height
But the problem is that it show me the first column content (col-md-2) after the second one content (col-md-10).
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
html,body,.m-container
{
height:100%;
}
.m-container
{
display:table;
width: 100%;
margin-top: 50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-2 .no-float, .col-md-10 .no-float {
float: none;
}
.col-md-2
{
float: none;
display: table-cell;
background: pink;
}
.col-md-10
{
display: table-cell;
background: yellow;
float: none;
}
</style>
</head>
<body>
<header>Header</header>
<div class="m-container">
<div class="row">
<!-- Data sources accordion -->
<div class="col-md-2">
<div class="well">I'm another well</div>
</div><!-- /end of col -->
<!--
Wall of panels
-->
<div class="col-md-10">
<div class="col-md-6">
<div class="well">I'm the first well</div>
</div>
<div class="col-md-6">
<div class="well">I'm the second well</div>
</div>
<div class="col-md-6">
<div class="well">I'm the third well</div>
</div>
</div>
</body>
</html>
I'm trying without using col-md-6 in the col-md-10 part and it works, but i should use col-md-6
Someone have an idea why i have this problem?
Above the JSFiddle link to my code
JSFIDDLE Code
I am trying to build a layout of buttons. I have worked at it for a while now, but I doubt my code would be helpful in understanding my problem. I have included the specs of the buttons on the image below. If you guys could show me how to make this layout it would be greatly appreciated.
Start with creating container and appropriate divs inside.
<div class="container">
<div class="blue"></div>
<div class="center">
<div class="red"></div>
<div class="yellow"></div>
</div>
<div class="green"></div>
</div>
then you have to position them and set particular width.
body, html { height: 100%; }
.container { height: 100%; }
.container > div { float: left; }
.center { height: 100%; width: 33%; }
.blue { background: blue; width: 33%; min-height: 100%; }
.red { background: red; height: 50% }
.yellow { background: yellow; height: 50% }
.green { background: green; width: 33%; height: 100% }
you can alternativly use flex box to get rid of float: left
.container { height: 100%; display: flex; }
Demo: http://jsfiddle.net/eLq0770h/
The way I would approach this is to make three DIV's side by side to make the three columns of your design. (the blue column, the red-and-yellow collumn and the green collumn)
You can then use two more DIV's to split the middle column in to two rows.
Your code would then be structured as follows
<div id="site">
<div id="leftcolumn">
CONTENT
</div>
<div id="middlecolumn">
<div id="middletop">
CONTENT
</div>
<div id="middlebottom">
CONTENT
</div>
</div>
<div id="rightcolumn">
CONTENT
</div>
</div>
You can then use CSS to set the widths and heights of these DIV's.
I don't know if this is the right way to do this, but this is how I do it.
Your code looks great. Here's how I would approach the project http://codepen.io/dfrierson2/pen/RNoWZe.
First I set the wrapper to 100% width then i centered the container with margin: 0 auto; I add a width to the container of 600px and set the height to auto and gave it a css selector class of overflow: hidden so that the container will expand with the content of the divs. I would use Bootstrap as a frame work because it is a responsive frame work with great starter code.
http://getbootstrap.com/getting-started/#template
It also has great pre style navs and buttons http://getbootstrap.com/components/#btn-groups
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.wrapper {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
border: 1px solid red;
overflow: hidden;
width: 600px;
height: auto;
background: yellow;
}
.col-md-4 {
border: 1px solid green;
float: left;
width: 198px;
height: 700px;
}
.blue {
background: blue;
}
.red {
background: red;
height: 350px;
}
.green {
background: green;
}
.one {
border: 1px solid black;
height: 350px;
}
.two {
border: 1px solid black;
height: 350px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 blue">33%</div>
<div class="col-md-4 red">33%</div>
<div class="col-md-4 green">
<div class="col-md-6 one">50%</div>
<div class="col-md-6 two">50%</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
So I am using a template from DivTag Templates for Weebly. And I have gone to them for help and they said they can not help me because it is not an issue it is simply a customization. :( My client asked if the sidebar on the template can be moved from the right side to the left side. I said I believe so but will check.
The only CSS HTML I can find for the sidebar page is:
I can not find anywhere where it says that currently the sidebar is on the right.
The issue I have with weebly is they have their drag and drop areas on the pages, and I noticed that the sidebar has a separate drag and drop area.
HTML for that specific page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class='no-header wsite-theme-light'>
<div class="note" style="text-align: center;"><p>This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear</p></div>
<div id="wrapper">
<div id="bar">
<div class="frame clearfix">
<div class="bar-text"><p>{call:text}</p></div>
<div id="search-button"><i class="af-search"></i></div>
<div class="social-frame">{social}</div>
<div class="search-bar">{search}</div>
</div>
</div>
<header id="header">
<div class="navContainer clearfix">
<div class="logo med-padding">{logo}</div>
<nav><div id="navigation">{menu}</div></nav>
</div>
</header>
<div id="main" role="main">
<div class="frame">
<div class="content table">
<div class="column32 table-content large-padding">{content} </div>
<div class="column3 table-content large-padding sidebar-content">{side:content}</div>
</div>
</div>
</div>
<footer>
<div id="footer" class="large-padding clearfix">
<div class="frame">
<div class="note" style="text-align: center;"><p>Drag & drop footer content here</p></div>
<div id="footer-content" class="med-padding">{bottom:content} </div>
<div id="footer-content" class="med-padding" style="display:none;">{footer}</div>
</div>
</div>
<div id="footer-bottom" class="feature small-padding">
<div class="frame">
<div class="copyright"><p>{copyright:text}</p></div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="/files/theme/basic-header.js"></script>
</body>
</html>
CSS:
/* --------------------------------------------------------------
LAYOUT
--------------------------------------------------------------- */
/* GENERAL */
.text-box-dark{
padding: 30px !important;
background: rgba(0,0,0,0.8) !important;
}
.text-box-light {
padding: 30px !important;
background: rgba(255,255,255,0.8) !important;
}
.xsmall-padding {
padding: 10px 0;
}
.small-padding {
padding: 20px 0;
}
.med-padding {
padding: 30px 0;
}
.large-padding {
padding: 45px 0;
}
.xlarge-padding {
padding: 65px 0;
}
.aligncenter {
text-align: center;
}
.sidebar-page div#content {
background: none;
width: 100%;
padding: 0;
}
.column2{
width: 50%;
min-width: 500px;
float: left;
}
.column3 {
width: 200px;
min-width: 200px;
min-height: 300px;
padding: 25px 20px;
background: url('sidebarbg.jpg');
border-left: 1px solid #eee;
vertical-align: top;
}
.column3 .weebly-area {
min-width: 200px;
min-height: 300px;
}
.column32 {
min-height: 300px;
min-width: 730px;
padding-right: 30px;
vertical-align: top;
}
div.sidebar-content {
min-height: 200px;
padding: 25px 45px;
}
.table{display: table;}
.table-content{display: table-cell;}
.center-content.table { height: 100%; margin: 0 auto;}
.center-content.table .table-content {vertical-align: middle;}
.overflow-hidden{overflow: hidden;}
.overflow-visible{overflow: visible;}
And when you find a solution. Can you explain to me why it needs to be a the way you are saying. I am trying to learn and the more knowledge I can soak up the better.
Thanks so much.
Yay got some good advice and figured I would share it with others
Move Column 3 above Column 32 on HTML
<div id="main" role="main">
<div class="frame">
<div class="content table">
<div class="column32 table-content large-padding">{content} </div>
<div class="column3 table-content large-padding sidebar-content">{side:content}</div>
</div>