I've prepared this lovely little image:
This is essentially what I need to achieve.
Im using the 960 Grid System
Is it even possible?
Ive tried this:
<div class="grid_8"></div>
<div class="clear"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="clear"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
but i dont know how id put the sidebar in!!
edit
i just tried hierarchy like so:
<div class="grid_8">
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="clear"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="clear"></div>
</div>
<div class="grid_4"></div>
but that mega failed :(
You will need to nest the .grid_4 and .grid_8 content divs in a .grid_8:
<div class="grid_8">
<div class="grid_8 alpha omega"></div>
<div class="grid_4 alpha"></div>
<div class="grid_4 omega"></div>
</div>
<div class="grid_4"></div>
Related
I am trying to create a css grid inside another css grid look like it's parent grid. The size of the inner grid is smaller by 20 and 100 pixels but it won't align like the parent grid. Please check out the codepen. Thank you.
CODEPEN: https://codepen.io/centem/pen/oNvZLgP?editors=1100
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
Replace the class inner-grid with the inner-grid-page. No CSS is defined for inner-grid class but I can see grids defined for inner-grid-page. Let me know if it works
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid-page">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
I made my site layout by using layzilla like this.
<div class="content">
<div class="top_block header">
<div class="content">
</div>
</div>
<div class="background right-sidebar">
</div>
<div class="right_block right-sidebar">
<div class="content">
</div>
</div>
<div class="background middle-sidebar">
</div>
<div class="right_block middle-sidebar">
<div class="content">
<div class="top_block middle-sidebar-up">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background left-sidebar">
</div>
<div class="right_block left-sidebar">
<div class="content">
<div class="bottom_block left-sidebar-down">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background container">
</div>
<div class="center_block container">
<div class="content">
</div>
</div>
</div>
It works well except sidebar is too long.
And I use this with AngularJS and uiRouter like this.
It doesn't work when sidebar is too long, the layout is broken.
How about using the css max-height:100vh;
This sets the maximum height to 100% of the viewport heigth.
Like this:
<div class="background left-sidebar" style="max-height:100vh">
If that would be too much, you could use 99vh instead.
Also, have you thought about using Bootstrap to lay out your page?
I'm stack with a pretty simple question, and I was wondering maybe you can help, cause you always do..
So what I have is a very basic bootstrap layout.. say:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">looong-long-text</div>
<div class="col-md-6">long-text</div>
<div class="col-md-6">another long text</div>
<div class="col-md-6">and another long text</div>
</div>
</div>
Please check the image link to see what i need
Is there any simple way to achieve such results with bootstrap? Tnx.
I have two solutions for you:
First (better in my opinion, less code):
<div class="container">
<div class="row">
<div class="col-md-6">
<div>First</div>
<div>Third</div>
</div>
<div class="col-md-6">
<div>Second</div>
<div>Fourth</div>
</div>
</div>
</div>
Second:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div>First</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>Third</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div>First</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>Third</div>
</div>
</div>
</div>
</div>
</div>
CODEPEN
You could try out the new Bootstrap version 4 card column feature.
You can't do this with bootstrap out of the box, but there are other tools to help you do this. Here is one of them:
http://masonry.desandro.com/
Hi I am using the bootstrap latest version for my website, I have some issue coding the layout of my page into following image
This could be a solution. Obviously the ids are for example.
<div class="container">
<header>
<div id="logo"></div>
</header>
<div id="background-image"></div>
<div class="row">
<div class="col-sm-9">
<div id="box1-with-3-columns" class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div id="box2-with-3-columns" class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
<div id="sign-up-box"></div>
</div>
<footer></footer>
</div>
I've created a 16 column layout with 960gs with a div class="grid_12" (main) and after that grid_4 (right) (12+4...)
Inside that grid_12 I wanted a three column style (3 pcs. grid_4). But the grid_4 boxes don't fit inside the grid_12, the last box drop into a second row.
Shouldn't the 960gs framework be able to do this layout for me, have i missed anything?
Thanks in advance.
<div class="container_16">
...
<div id="main" class="grid_12">
<div class="grid_12">
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
</div>
<div id="right" class="grid_4">
</div>
</div>
...
</div>
Found out that I needed to add alpha and omega classed to the first and last grid_4 box. Now it works.
<div id="main" class="grid_12">
<div class="grid_4 alpha">
</div>
<div class="grid_4">
</div>
<div class="grid_4 omega">
</div>
</div>