Horizontal layout of divs - which method is best [closed] - javascript

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;
}

Related

Hide scrollbar and swipe left right with CSS

I have a created a box where I want to horizontally scroll the content from left to right on mobile and I wanted to swipe using touch and hide the scrollbar, here is a working JSfiddle
Should I try any JSplugin to handle this or is this something doable easily? Please suggest
.spotlight_graphs {
bottom: 30px;
clear: both;
left: 0;
margin-left: auto;
margin-right: auto;
max-width: 360px;
overflow: auto;
position: absolute;
right: 0;
width: 100%;
background-color:#cbcbcb;
overflow:auto;
padding:10px;
}
.spotlight_graphs > ul {
font-size: 0;
list-style: outside none none;
margin: 0;
padding: 0;
text-align:left;
width:200%;
}
.spotlight_graphs > ul > li {
max-width: 90px;
width: 33%;
display:inline-block;
background-color:#dec8c8;
height:100px;
margin:0 5px 5px 0;
border:1px solid #333333;
}
.spotlight_graphs > ul > li > .graph_detail {
color: #404040;
float: left;
font-size: 14px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
<div class="spotlight_graphs">
<ul>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
</ul>
</div>
If you are using webkit browser such as chrome and safari, you could easiy add the following code to your CSS. Demo -> https://jsfiddle.net/xzc7khk0/5/
::-webkit-scrollbar { display: none; }
I think the easiest way to get this is using only CSS and baiscly rotating the items 90deg.
you can find it explained really well here:
Here's a link! where you can find this solution explained really well.
Another solution is to place the div that has the scrollbar into another div that has a height less than the scrolling div and overflow hidden in order to cover the scrollbar like this:
.hideScroll {
height: 129px;
overflow: hidden;
position: relative;
}
I edited your fiddle here: https://jsfiddle.net/xzc7khk0/6
You can do it with CSS as #Stan George said.
But this css is only for mobile, because you want to disappear scrollbar in mobile, so apply css on your scrollable div.
.spotlight_graphs::-webkit-scrollbar{
background-color:transparent;
}
it will disappear the scrollbar not scrolling.
Easy to do with css Webkit
html {
overflow: scroll;
overflow-x: hidden;
}
.spotlight_graphs::-webkit-scrollbar {
width: 0px; //remove scrollbar width
background: transparent; //optional: it will make scrollbar invisible
}

How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div?

First of all an example:
https://jsfiddle.net/85uqehz5/
The code is just an example, an easier version of my real code. I figured out that I cant't have both: Setting the wrap-div to overflow: visible the menu that shows up isn't cut off but the box shadow doesn't embrace the box; With overflow:auto; the box-shadow is working but the menu cut off. How could I solve this? A fixed height would not be an option.
Example Code:
$('#menu').click(function() {
$('#menu-list').toggleClass('hidden');
});
#wrap {
width: 80%;
height: auto;
overflow: visible;
box-shadow: 0 0 .2rem rgba(0, 0, 0, .4);
}
#content {
width: 200px;
height: 20px;
margin: 0 auto;
}
#content2 {
float: left;
}
.hidden {
display: none;
}
#menu {
position: relative;
height: 20px;
width: 100px;
background-color: #ccc;
float: left;
}
#menu-list {
position: absolute;
top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<div id="content">
Some Content
</div>
<div id="content2">
Some Content
</div>
<div id="menu">
Open Menu
<div id="menu-list" class="hidden">
<div> bla </div>
<div> bla </div>
<div> bla </div>
</div>
</div>
</div>
It's very simple, in your specific case:
1- Remove overflow: auto; from #wrap
2- Add this to your CSS:
#wrap:after {
display: table;
content: "";
clear: both;
}
This makes the height of #wrap's calculation include the floated element.
If you have multiple uses declare a class like clearfix and use it whenever needed.
Demo: https://jsfiddle.net/85uqehz5/1/
Floats must be cleared: https://jsfiddle.net/85uqehz5/3/
<div id="wrap" class="clearfix">
The reason the menu is cut off is because you haven't clear your float: left and that is done with such piece of code to the container
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

With jQuery how can you make all of the parent divs and body expand in height to accommodate content?

Objective
To have the page the page on my website to expand in height according to the dynamic data pushed into the container.
Background
The page has a set of images and text that is populated via a JSON feed. The text is overflowing into the footer because it is not expanding its containing div which would subsequently expand its containing div which would subsequently expand the body. So I need for a specific child div to push its multiple parent divs.
I have searched similar problems on Stackoverflow and attempted various CSS solutions such as giving all of the parent divs a CSS rule of clear:both or even in the HTML inserting a <div style="clear:both"></div> but none of those solutions worked.
So now I am experimenting with jQuery to see if I could find a solution to this problem.
I know I need to create a variable of some sort like
var newHeight = $("#carousel").height();
And that it needs to have push out the height with something like
$(".case").height(newHeight);
This is my current HTML
<body>
<div class="container">
<div class="block push">
<div id="mainContent" class="row">
<div class="large-12 columns">
<h1>Before & After Case Gallery</h1>
<div id="casesContainer">
<div id="carousel"></div>
</div>
<script id="casestpl" type="text/template">
{{#cases}}
<div class="case">
<div class="gallery_images_container">
<div class="item_container">
<div class="gallery_heading">BEFORE</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_300.jpg" alt="Photo of {{alt}}" />
</div>
<div class="item_container">
<div class="gallery_heading">AFTER</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_300.jpg" alt="Photo of {{alt}}" />
</div>
</div>
<div class="description_container">
<p>
<span><strong>Case Number {{{number}}} {{version}}:</strong></span>
{{{description}}}
</p>
</div>
</div>
{{/cases}}
</script>
The {{{description}}} in the <p> is overflowing into its parent divs <div class="description_container"> then <div class="case"> then <div id="carousel"> then <div class="casesContainer"> then <div class="large-12"> (which is a container in Foundation) then <div class="mainContent"> and so on.
Here is my CSS
html, body { height: 100%; }
.container { display: table; height: 100%; width: 100%; margin: 0 auto; }
.block { display: table-row; height: 1px; }
.push { height: auto; }
#mainContent {}
#casesContainer {
min-width:310px;
}
.image-navigation {
background: rgb(6,6,6);
color: #fff;
width:100%;
max-width: 640px;
height: 24px;
}
.image-navigation a {
color: #fff;
padding: 6px;
}
.image-navigation-previous, .image-navigation-next{
float:left;
width: 50%;
}
.image-navigation-previous {
text-align: right;
}
.image-navigation-next {
text-align: left;
}
#carousel {
height:auto;
min-height:600px;
overflow-y: auto;
}
.case {
max-width: 640px;
height:auto;
}
.gallery_images_container {
clear: both !important;
}
.item_container{
max-width: 320px;
float: left;
}
.gallery_heading {
background: black;
color: white;
width: 100%;
text-align: center;
}
.description_container {
background: none repeat scroll 0% 0% white;
min-width: 308px;
max-width: 640px;
padding: 6px 6px 12px 6px;
clear: both !important;
}
I realize that #carousel { height:auto; min-height:600px; overflow-y: auto; } is an ugly hack. It was just an experiment.
I hope that I am just completely missing something and this is an easy jQuery fix. Or maybe my HTML and CSS could use a different structure?
Not a complete fix but maybe helpful.
I've used this function but Internet Explore increases the heights on resize.
$(document).on('ready', function() {
// $(window).on('resize', function() {
var height1 = $("#r1c1").height();
if (height1 < $("#r1c2").height()) { height1 = $("#r1c2").height() }
if (height1 < $("#r1c3").height()) { height1 = $("#r1c3").height() }
$("#r1c1").height(height1);
$("#r1c2").height(height1);
$("#r1c3").height(height1);
// }).trigger('resize'); // Trigger resize handlers not working correctly with IE8.
});//ready

how to set the width of page element in jquery

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;
}

Javascript - Dynamic div width depending on page size

I need to set the width of a div depending on the page size.
I have three columns. The first and third ones are 50px fixed. I need to set my middle one so it will take all the space with a small margin. I haven't found how to do it in CSS. So I tried using Javascript with window.innerWidth and subtracting the two 50px.
Here is my CSS :
<div class="col1">
...
</div>
<div class="col2">
<div class="col2-1">
...
</div>
<div class="col2-2">
...
</div>
</div>
And the corresponding Javascript
<script type="text/javascript">
setStoreInfoWidth = function () {
$('div.col2-1').css('width', window.innerWidth-100 + 'px')
};
setStoreInfoWidth();
$(window).resize(function () {
setStoreInfoWidth();
});
</script>
Here is a JsFiddle with the code working : http://jsfiddle.net/MrYUb/
However, I can't make it work on my actual website.
Do you have any idea why?
You can use negative margins to create a 3 column layout:
http://jsfiddle.net/teynon/J2mx7/2/
<div class="container">
<div class="leftCol">
Left stuff
</div>
<div class="rightCol">
Right Stuff
</div>
<div class="middleCol">
Middle stuff
</div>
</div>
<div style="background-color: #0000BB; clear: both;">Test</div>
CSS:
.container {
width: 100%;
position: relative;
}
.leftCol {
float: left;
margin-right: -50px;
width: 50px;
left: 0px;
min-height: 100px;
background-color: #FF0000;
}
.rightCol {
width: 50px;
margin-left: -50px;
right: 0px;
min-height: 50px;
background-color: #00FF00;
float: right;
}
.middleCol {
margin: 0px 55px 0px 55px;
background-color: #0000FF;
min-height: 50px;
}
Why not using percent? If you have 2 divs, that 'll make 50% for each.

Categories

Resources