Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
how can I set up a HTML Page with two content sides? Without <frames> !
In example:
On the left side should be the menu for the navigation.
On the right side should be the content of the page.
Example menu:
<div id="page">
<div id="menuleftcontent">
<ul id="menu">
<li> first</li>
<li>second</li>
</ul>
</div>
<div id="maincontent">
<div id="firstcontent">first</div>
<div id="secondcontent">second</div>
</div>
</div>
The menu on the left side should be a fix content and the right content should be changeable.
I have made a sketch:
Thanks in advance
Re-arrange the code so that (i) main content appears before sidebar in HTML source order (ii) add a clearing div (iii) change the href attribute of menu links:
<div id="page">
<div id="maincontent">
<div id="firstcontent">firstcontent</div>
<div id="secondcontent">secondcontent</div>
</div>
<div id="menuleftcontent">
<ul id="menu">
<li>first</li>
<li>second</li>
</ul>
</div>
<div id="clearingdiv"></div>
</div>
Then use the following CSS:
#page {
margin-left: 200px;
}
#maincontent {
float: right;
width: 100%;
background-color: #F0F0F0;
}
#menuleftcontent{
float: left;
width: 200px;
margin-left: -200px;
background-color: #CCCCCC;
}
#clearingdiv {
clear: both;
}
For the obscure part of your question, you need to use JavaScript to show/hide divs. While it is possible to use vanilla JavaScript, the jQuery library makes it much easier:
$(function () {
$("#maincontent > div:gt(0)").hide();
$("#menu a").on("click", function (e) {
var href = $(this).attr("href");
$("#maincontent > " + href).show();
$("#maincontent > :not(" + href + ")").hide();
});
});
Demo here
just apply some css to your html like this :
#page{
width: 1280px;
display: inline;
}
#menuleftcontent{
float: left;
width: 420px;
}
#maincontent{
float: left;
width: 960px;
}
width are some example ;)
Here is a sample of how you can implement splitting your contents. Although, there are many ways to do this actually :)
JS Fiddle
#page {
width: 100%;
}
#menuleftcontent {
float: left;
width: 25%;
}
#maincontent {
float: left;
width: 75%;
}
you can use below css for your html to display it in left and right frame structure
#menuleftcontent
{
width: 30%;
float: left;
}
#maincontent
{
width: 70%;
float: left;
}
#page
{
width : 100%;
clear : both;
}
If you are asking about how to split page vertically without frames. There is an answer for you https://stackoverflow.com/a/11662564/841037
If you are finding a solution to make every page have the fixed content on the left. Then you may seek for something called page template or master page in your backend web framework.
The best you can do is make 2 divs. One with float: left, give that a fixed width, and then create another with a margin-left with the same width as your menu.
CSS:
#leftie {
width: 200px;
background: red;
float: left;
}
#rightie {
margin-left: 200px;
background: green;
}
HTML:
<div id="leftie">
This is your menu
</div>
<div id="rightie">
This is your main content
</div>
Working example:
http://fiddle.jshell.net/xynw4/show/
Fiddle URL:
http://jsfiddle.net/xynw4/
here is an exemple of CSS to style your HTML :
<style>
.page{width:100%; min-height:900px;}
.menuleftcontent{min-width:20%;float:left;height:900px;border:dotted 1px red;}
.maincontent{min-width:78%;float:left;height:900px;border:dotted 1px blue;}
</style>
<div id="page" class="page">
<div id="menuleftcontent" class="menuleftcontent">
<ul id="menu">
<li><a href="showfirstcontent" </a>first</li>
<li><a href="showsecondcontent" >second</a></li>
</ul>
</div>
<div id="maincontent" class="maincontent">
<div id="firstcontent" >first</div>
<div id="secondcontent">second</div>
</div>
</div>
Related
I have been reading about fixed div's within relative and absolute div's here:
Fix position of div with respect to another div
Fixed positioned div within a relative parent div
Fixed position but relative to container
And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain
View 1 & View 2
After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.
Is this posible with only HTML and CSS or do I need a plugin?
Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.
There were a few things going on:
You can set body { position: relative } in your CSS
position: sticky needs a full height column to work. Because your col-6 that was holding your menu was only as tall as it needed to be, it won't scroll.
I moved the p-sticky class to your column.
sticky also needs a top value to know where the element should stick to once it becomes sticky.
.p-sticky {
position: sticky;
top: 60px;
}
body {
position: relative;
}
/*some attemps*/
.p-relative {
position: relative;
}
.p-absolute {
position: absolute;
}
.p-sticky {
position: sticky;
top: 60px;
}
.p-fixed {
position: fixed;
}
/* Standar CSS*/
.navbar {
background-color: blue;
width: 100%;
}
.nav-fixed {
top: 0px;
z-index: 1;
position: fixed;
}
.content-ex1 {
height: 200px;
background-color: green;
}
.content-ex2 {
height: 500px;
background-color: #aaaaaa;
}
.menu {
height: 50px;
background-color: red;
}
<div class="navbar">
some navbar things
</div>
<div class="navbar nav-fixed">
some navbar things
</div>
<div class="content-ex1"> Some content here</div>
<div class="container">
<div class="row">
<div class="col-sm-6 p-sticky">
<div class="menu">menu or something</div>
</div>
<div class="col-sm-6 content-ex2"> Some content here</div>
</div>
</div>
<div class="content-ex1"> Some content here</div>
Here's the fiddle to play around with (which includes your bootstrap):
http://jsfiddle.net/w4mz9dte/
Note: you appear to be using an old version of BootStrap. You may want to update to the newest version. In that case, only a few things will change - namely, you move the p-sticky class to the menu.
Here's the newest version of BS 4.4: http://jsfiddle.net/kamr0bjw/
body {
position: relative;
}
/*some attemps*/
.p-relative{
position:relative;
}
.p-absolute{
position:absolute;
}
.p-sticky{
position:sticky;
top: 60px;
}
.p-fixed{
position:fixed;
}
/* Standar CSS*/
.navbar{
background-color: blue;
width:100%;
}
.nav-fixed{
top: 0px;
z-index:1;
position:fixed;
}
.content-ex1{
height:200px;
background-color: green;
}
.content-ex2{
height:500px;
background-color: #aaaaaa;
}
.menu{
height:50px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<div class="navbar">
some navbar things
</div>
<div class="navbar nav-fixed">
some navbar things
</div>
<div class="content-ex1"> Some content here</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="menu p-sticky">menu or something</div>
</div>
<div class="col-sm-6 content-ex2"> Some content here</div>
</div>
</div>
<div class="content-ex1"> Some content here</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am brand spanking new to HTML so please excuse the lack of knowledge. I am currently trying to set up a little website and I want to have three sections that a user can click on that will route the user to a different part of the website. Simply put, I want three sections, aligned left, center, and right that is able to be shown on the same line. Every time I am attempting this however, I set up one section on the left, and then I can get a section on the center and the right, but it is going on another line horizontally.
How can I get all three sections to be on the same horizontal line and simply just left, right and center?
The trick is to use display: inline-block although there are many ways to do this.
Suggest you look into flexbox as this will make your future coding life a lot easier.
#container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<div id='container'>
<div id='left'></div>
<div id='center'></div>
<div id='right'></div>
</div>
<html>
<head>
<style>
#parent-container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
position: relative;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: yellow;
}
#right {
background-color: green;
}
</style>
</head>
<body>
<div id='parent-container'>
<div id='left'>
Left
</div>
<div id='center'>
Center
</div>
<div id='right'>
Right
</div>
</div>
</body>
</html>
Use bootstrap to align your divs.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
https://getbootstrap.com/docs/4.0/layout/grid/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
There seem to be various methods of creating a horizontal three column div layout:
Position: relative/absolute;
Float: left/right; with margin: 0 auto; for center div
Float: left; for all divs
Display table / table-cell
Any thoughts on which is best practice and the advantages/disadvantages of each approach.
Thanks,
Edit1: Example edited to include line heights
Edit2: One requirement which I forgot to mention is that columns should all be of equal height, thanks #LGSon for pointing that out.
Edit3: added new method - 4. Display table / table-cell. I know this just feels wrong but in the absence of any other working solutions looks like the best option available at the moment.
1. Position: relative/absolute;
<div id="mainContent" style="position: relative; width:95%; margin: 0 auto; background-color: lightGrey;">
<div style="position: absolute; left: 0%; width: 33%; background-color:blue;">Left<br>line2</div>
<div style="position: absolute; left: 33.5%; width: 33%; background-color:green;">Middle</div>
<div style="position: absolute; left: 67%; width: 33%; background-color:yellow;">Right<br>line2</div>
</div>
<br><br><br>
2. Float: left/right; with margin: 0 auto; for center div
<div id="mainContent" style="overflow: hidden; width:95%; margin: 0 auto; background-color: lightGrey;">
<div style="float:left; width: 33%; background-color:blue;">Left<br>line2</div>
<div style="float:right; width: 33%; background-color:yellow;">Right<br>line2</div>
<div style="margin: 0 auto; width: 33%; background-color:green;">Middle</div>
</div>
<br>
3. Float: left; for all divs
<div id="mainContent" style="overflow: hidden; height:100%; width:95%; margin: 0 auto; background-color: lightGrey;">
<div id="left" style="float: left; width:33%; background-color:blue;">Left<br>line2</div>
<div id="mid" style="float: left; width:33%; background-color:green;">Middle</div>
<div id="right" style="float: left; width:33%; background-color:yellow;">Right<br>line2</div>
</div>
<br>
4. Display table / table-cell
<div id="mainContent" style="width:95%; margin: 0 auto; display: table;">
<div style="display: table-cell; width: 33%; background-color:blue;">Left<br>line2</div>
<div style="display: table-cell; width: 33%; background-color:green;">Middle</div>
<div style="display: table-cell; width: 33%; background-color:yellow;"> Right<br>line2</div>
</div>
In general, use flexbox, its newest and modern way for layout, the other one's can sometimes be at hand when one simply can't use or solve it with flexbox, though that is quite rare.
With flexbox you get exactly that, flexibility, and here is a great article about it: A guide to flexbox
.mainContent {
display: flex;
width:95%;
margin: 0 auto;
}
.mainContent > div {
flex-basis: 33.33%;
}
.mainContent > div:nth-child(1) {
background-color:blue;
}
.mainContent > div:nth-child(2) {
background-color:green;
}
.mainContent > div:nth-child(3) {
background-color:yellow;
}
<div class="mainContent">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
Update based on comment/question edit
Since equal height is a requirement, it is either the above flexbox or the below display: table (unless you want to use script or resort to the old holy grail concept)
These two offers dynamic content without the need of fixed height and can easily switch between stacked vertically or horizontally, using a media query.
.mainContent {
display: table;
width:95%;
margin: 0 auto;
}
.mainContent > div {
display: table-cell;
width: 33.33%;
}
.mainContent > div:nth-child(1) {
background-color:blue;
}
.mainContent > div:nth-child(2) {
background-color:green;
}
.mainContent > div:nth-child(3) {
background-color:yellow;
}
<div class="mainContent">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
Here's my summary of options:
Your first example (Position: Absolute) -- I'd steer away from this, as it's by definition unresponsive to different screen widths and devices.
Second example (Float: [mixed]) -- this one will work, but it takes a lot of hard-coding float values, which will make it difficult to edit later or apply to other layouts with four items per line, for example. Aim for reusability!
Third example (float: left) -- this definitely works if you want everything left-aligned, but not much else.
I agree with #LGSon; Flexbox is the way to go, unless you want to use Bootstrap or a similar framework with a grid system: http://getbootstrap.com/css/#grid
sometimes simple is the best. I would stick with the third alternative, but as you see you have to give a positive value for margin property.
I would use this solution for your problem:
HTML CODE
<div class="left blue">Left</div>
<div class="left green">middle</div>
<div class="left yellow">right</div>
CSS CODE
.left {
float: left;
width: 33%;
margin: 10px 2px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
there is a tool bar in the left of my page, the width of the tool bar is 35px, the main content panel is in the right of my page and has CSS float:right I want to set the width of main content panel with 100%-35px, so that the tool bar can be displayed, how can I achieve this effect, many thanks.
You can use calc(). But i'm not sure about browser compatibility. So try jquery solution.
Layout should be like this.
<div style="width: 100%">
<div id="toolbar" style="display: inline-block; width: 35px"></div>
<div id="main-content" style="display: inline-block"></div>
<div>
in jquery:
$("#main-content").width($(window).width() - 35);
if there is padding or margin detect them also.
It's convenient to do this by using absolute position. It doesn't need to use javaScript and it handle screen size change event correctly.
the css like bellow:
.toolbar {
position: absolute;
width: 35px;
}
.content {
position: absolute;
left: 35px;
right: 0px;
}
see the demo in jsFiddle.
Pure CSS based approach:
css:
.container {
padding-left: 50px;
border: 1px solid red;
}
.toolbar {
width: 35px;
margin-left: -50px;
padding: 0 5px;
list-style-type: none;
}
.main {
width: 100%;
}
.col {
display: inline-block;
vertical-align: top;
}
html:
<div class="container">
<ul class="toolbar col">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<div class="main col">
<p>This is the place holder for Main Content</p>
</div>
</div>
http://cdpn.io/hlfFG
Sounds like this can easily be done with CSS.
#main-content {
width: 100%;
margin-right: 35px;
}
I am tring to make two columns having same height but failed.
How to change my CSS or using Jquery? No table please. I have a gridview to display
table from database.
My code:
<div id="wrap">
<div id="header">
<h1>TEST</h1>
</div>
<div id="sidebar">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div id="gridview">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
</div>
CSS:
#wrap
{
width: 800px;
background-color: #99c;
overflow: hidden;
}
#header
{
border-style: solid;
border-width: 1px;
background-color: #ddd;
width: 800px;
padding-top: 30px;
padding-bottom: 30px;
}
#sidebar
{
float: left;
width: 125px;
padding-top: 10px;
background-color: #C0C0C0;
}
#gridview
{
float: right;
width: 675px;
}
I tried faux column but no luck.
Q1: How to modify my CSS or using jquery?
Q2: The table width is hard to fit the width of #wrap(here is 800px). Any trick on it?
Thanks for code help.
I like to do this using jQuery
jQuery(document).ready(function() {
var divone = jQuery("#sidebar").height();
var divtwo = jQuery("#gridview").height();
var maxdiv = Math.max(divone, divtwo);
jQuery("#sidebar").height(maxdiv);
jQuery("#gridview").height(maxdiv);
});
This basically takes the height of both divs and gets the max height, then assigns the both divs the same height. This works great for expanding divs
Try this too:
function sameHeight(el1,el2) {
var he1 = $(el1).height();
var he2 = $(el2).height();
if(he1 > he2){ $(el2).height(he1); };
if(he1 < he2){ $(el1).height(he2); };
};
sameHeight(yourhtmlelement1,yourhtmlelement2);
You can use for various html elements!
What you need is a clearfix:
<div id="sidebar">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div id="gridview">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
<span class="clear!></span>
Add this span at this locatiob (under the two floated divs)
And use this CSS:
.clear
{
display: block;
clear: both;
}
The two columns should now be the same height.