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/
Related
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;
}
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 7 years ago.
Improve this question
I'm trying to make a Tumblr page. The idea is to have several book titles listed on the left side that, when hovered over, display the information for said book on the right side.
Example
There, "Example 2" is being hovered over in the blue box, so its respective information appears in the red box on the right. If I were to hover over "Example 3" from there, the information box for "Example 2" would fade out while the one for "Example 3" would fade in. I hope I'm make some sort of sense here.
Now, I know I could achieve this with pure CSS, but I imagine that would involve creating a custom CSS class for each title in the list. Is there any other way of potentially doing this while avoiding the CSS dance?
Pure CSS, one class for all titles - Codepen
HTML
<div class="menu">
Example 1
<div class="show">
<h1>EXAMPLE 1</h1>
<hr>
<p>text here</p>
</div>
Example 2
<div class="show">
<h1>EXAMPLE 2</h1>
<hr>
<p>text here</p>
</div>
Example 3
<div class="show">
<h1>EXAMPLE 3</h1>
<hr>
<p>text here</p>
</div>
Example 4
<div class="show">
<h1>EXAMPLE 4</h1>
<hr>
<p>text here</p>
</div>
</div>
CSS
body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.menu {
width: 120px;
height: 300px;
background-color: #2F43B7;
}
.menu a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu a:hover + .show { /* Select .show that is immediately after a */
opacity: 1;
}
.show {
transition: 500ms;
opacity: 0;
background-color: #B72F2F;
position: absolute;
top: 0;
left: 130px;
width: 400px;
height: 300px;
text-align: center;
}
.show h1 {
font-size: 46px;
margin-bottom: 0;
}
.show h1,
.show p {
color: #fff;
}
.show hr {
width: 90%;
border: 2px solid #000;
}
Same effect with jQuery:
$(".show").css("opacity", 0);
$("a").hover(
function(){
$(this).next(".show").stop().fadeTo("slow",1);
},
function(){
$(this).next(".show").stop().fadeTo("slow",0);
});
I have a main div under which there can be one or two sub divs. When there are two sub-divs, I would want them to be displayed side-by-side. But If I have only one sub div, then I'd want it to be displayed in the center. Can this be achieved by using CSS or should I take help of JavaScript? Using the following CSS I'm able to achieve the side-by-side part of it. But I'm not sure how to go forward when there is only one sub div
HTML:
<div id="maindiv">
<div class="subdiv">
<p>Div One</p>
</div>
<div class="subdiv">
<p>Div Two</p>
</div>
</div>
CSS:
div.subdiv {
float: left;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
}
Use display:inline-block instead of float:left. Try to remove the second sub div in my example fiddle and you can see the desired result.
div.subdiv {
display:inline-block;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
text-align:center;
}
DEMO
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
If i have a div 100px x 100px.
And i define 10x child divs that should fit next to each other with 10px x 10px.
Why do they not?
try it with your browser: http://dwaves.de/prozentuale-angaben-check.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Statisches Layout</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html,body {
height: 100%;
width: 100%;
}
.container {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
.relative {
width: 10%;
height: 10%;
background: yellow;
position: relative;
float: left;
}
.fixed {
height: 10px;
width: 10px;
background: blue;
position: relative;
float: left;
}
</style>
<body>
<div class="container">
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
</div>
</body>
</html>
In the link you posted, you have 12, not 10 <div> elements. Also, you have an unnecessary <br/> tag. Fix those two issues and they will fit in one row.
JSFiddle demo here (with <br> and two last <div> tags removed).
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>