I'm trying to create a web page and I have this problem-question. The idea is to show an article in the main column, to the left, and several comments below the article.
In the right column, we'll show ads.
The problem is this: I have proved several layouts (this is the last one), but always the right column fall below the left (article-and-comments).
How I could do this?. The idea is that the left column (article-and-comments), could grow indefinitely, or even could be very short (if no one has commented), but the right column always keep on the right.
<body>
<div class="container">
<div class="header">Header menus etc etc</div>
<div id="main-block">
<div id="article-and-comments">
<div class="article-detail">The Article </div>
<div class="comment">1° Comment</div>
<div class="comment">1° Comment</div>
<div class="comment">1° Comment</div>
</div>
<div class="advertising">
Right Column with Ads
</div>
<div class="push"></div> <!-- This is to push the footer to the bottom
</div> <!-- main-block -->
<div class="footer">
Footer
</div>
you need to make the article-and-comments and advertising widths to add up to the main-block width.
And you need to float them left and right ..
example at http://www.jsfiddle.net/gaby/tBd7L/
There are a few ways to do this. One is to set your content column to a fixed width and float it left, then set your ad column to have a left margin greater than or equal to the width of the content column.
Here's a very rough example:
http://jsfiddle.net/PVqKX/
Related
Using angular/flex-layout, I have a simple two-column layout.
<div fxFlex fxLayout="row">
<div fxFlex="35%">
<!-- Left Column -->
</div>
<div fxFlex="65%">
<!-- Right Column -->
</div>
</div>
On small displays I want the columns to wrap, right below left.
Using angular/flex-layout's Responsive API, I add a breakpoint for small screens (between 600px and 959px) with fxLayout.sm="column" on the container element:
<div fxFlex fxLayout="row" fxLayout.sm="column">
<div fxFlex="35%">
<!-- Left Column, Top Row -->
</div>
<div fxFlex="65%">
<!-- Right Column, Bottom Row -->
</div>
</div>
On small screens the Left Column becomes the Top Row, and Right Column, the Bottom Row.
However, fxFlex="35%" and fxFlex="65%" attributes are still honored, and so the rows overlap. The Top Row occupies 35% of the display height, since it previously occupied 35% of the display width.
Please see this Plunker for an example of the problem. Note, I used the fxLayout.xs breakpoint rather than fxLayout.sm to demonstrate the problem since Plunker's divides the display up into small sections.
I can fix this by explicitly removing fxFlex using the Responsive API (i.e. fxFlex=""):
<div fxFlex fxLayout="row" fxLayout.sm="column">
<div fxFlex="35%" fxFlex.sm="">
<!-- Left Column, Top Row -->
</div>
<div fxFlex="65%" fxFlex.sm="">
<!-- Right Column, Bottom Row -->
</div>
</div>
Please this Plunker for an example of the solution.
There are two problems with this. Firstly, it feels very, very hacky. Secondly, assuming I want the same behaviour for small and extra small displays, I end up with:
<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
<div fxFlex="35%" fxFlex.sm="" fxFlex.xs="">
<!-- Left Column, Top Row -->
</div>
<div fxFlex="65%" fxFlex.sm="" fxFlex.xs="">
<!-- Right Column, Bottom Row -->
</div>
</div>
Unless there's any easier way to use the Responsive API for displays below a certain dimension, rather than set breakpoints explicitly?
The angular-flex-layout Responsive API also has a gt-sm (greater than small) property.
To avoid having to add every screen size with an fxFlex="" value you can just do something like this:
<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
<div fxFlex.gt-sm="35%">
<!-- Left Column, Top Row -->
</div>
<div fxFlex.gt-sm="65%">
<!-- Right Column, Bottom Row -->
</div>
</div>
Or you can use the lt-lg (less than large) property and have
<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
<div fxFlex="35%" fxFlex.lt-lg="">
<!-- Left Column, Top Row -->
</div>
<div fxFlex="65%" fxFlex.lt-lg="">
<!-- Right Column, Bottom Row -->
</div>
</div>
I have two columns in a row.
<div class="row">
<div class="col-lg-2">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8">
I want this column in top side on mobile.
</div>
</div>
When I visualize this on my laptop, they are in left and right side respectively. When I watch the page on my mobile phone I see first column on top of the web page.
I want to change the order, first column left side on laptop and bottom side on mobile phone instance of first column that is left side on laptop and top side on mobile phone.
I want to keep the laptop aspect, only change mobile phone view.
Check out the documentation of Bootstrap 3's grid system:
http://getbootstrap.com/css/#grid
By adding the *-lg classes you have only specified how your page should behave on a large screen.
You probably want to add the *-xs classes for defining the columns in the smartphone widths. You can keep the *-lg classes just as they are now.
Furthermore, for changing the order of columns in different widths, bootstrap provides *-push and *-pull classes, see here: http://getbootstrap.com/css/#grid-column-ordering
add class to the larger div .pull-left, and smaller div .pull-right
<div class="row">
<div class="col-lg-2 pull-right">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8 pull-left">
I want this column in top side on mobile.
</div>
</div>
This will float the second larger div to the left, and thus in the mobile view, where .col-lg-8 is not applicable, will bring it on top
Edit: As this answer creates a gap between two divs, because there are only 10 columns utilized
You will need to change your html see this http://jsfiddle.net/53u69ama/1/
<div class="row">
<div class="col-sm-8 col-xs-12 ">
I want this column in top side on mobile.
</div>
<div class="col-sm-2 col-xs-12 ">
I want this column in bottom side on mobile.
</div>
</div>
Edit 2: you can also change the top position using position style, but this will require you to set the static top for one div. Or you may change it using javascript dynamically.
see this http://jsfiddle.net/53u69ama/2/
Solution:
<div class="row">
<div class="col-lg-8 col-lg-push-2">
I want this column in top side on mobile.
</div>
<div class="col-lg-2 col-lg-pull-8">
I want this column in bottom side on mobile.
</div>
</div>
Use this
<div class="row">
<!-- this is visible if view is all less lg (on top) -->
<div class="device-xs visible-xs device-sm visible-sm device-md visible-md">
<div>
Content to view 2.
</div>
</div>
<div class="col-lg-2">
Content to view 1
</div>
<!-- this is visible when view is lg (in right) -->
<div class="col-lg-8 device-lg visible-lg">
Content to view 2.
</div>
</div>
Note that you will have to copy "Content to view 2." twice.
I've boiled my layout down to this fiddle or the full screen version
I am having two problems. The first, is that space between the side bar and the content is very large. I want them to be spaced as normal. In my case, I'm expecting the side bar to be span2 in size, my main content to be span7 in size and then a right hand column to be span3.
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
...other links ...
</ul>
</div>
</div>
<div class="span7 span-fixed-sidebar">
<div id="world-map" style="display:block;"> </div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span12" id="country-info">
<h2 id="country-info-header">
The Detail Header
</h2>
<p id="country-info-summary">
A set of summary information. A short paragraph of text.
</p>
</div>
</div>
</div>
However, I'm getting a result with a huge gap between my sidebar and my content (the red box), and the right hand content is on the left hand side and under my sidebar. How can I fix this layout?
You need to experiment with Bootstraps offset classes. I made you a quick example here:
http://jsfiddle.net/tXzjX/5/
Your position:fixed takes the element out of the natural flow of the page, and in a way "resets" the columns on the grid. Using Bootstrap's offset classes can counteract that issue. Check here: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem under "Offsetting Columns".
Could you not just reduce the margin size like so:
.row-fluid > .span-fixed-sidebar {
margin-left: 100px;
}
as that seems to move the red bar in nicely
EDIT: I have had a play about and come up with a slightly simpler looking code with what I think is the effect you require with a bit of tweaking. http://jsfiddle.net/bmgh1985/UeFRa/
I have a series of elements within a row-fluid and span12 that are span4. I want to be able to output as many of these as necessary and have them automatically line up in columns of 3. The problem im having is that this happens, but there is an offset (the uncleared float offset).
Is there a way to do this without counting each box and every 3rd one closing the previous row and starting a new one?
<div id="content" class="clearfix row-fluid">
<div id="main" class="span12 clearfix" role="main">
<div class="row-fluid">
<div class="span4">Test</div>
<div class="span4">Test</div>
<div class="span4">Test</div>
<div class="span4">Test</div>
<div class="span4">TEst</div>
</div>
</div>
</div>
This is practically unavoidable if your boxes have varied height. You can get around this issue by using the Masonry jQuery plugin.
Otherwise, you can use a fixed height for your boxes.
This happens because floated elements fall out of the normal HTML document flow and default to this behaviour when some elements are taller than their siblings.
Basically I'm trying to create a simple webpage template which would contain 3 rows. The first being the header which contains two columns, the second just being the mainbody and then the last being a footer.
Coding wise i'm doing this kind of layout
<div id="wrapper">
<div id="header">
<header>
</header>
<div id="col2>
</div>
</div>
<div="mainbody"></div>
<footer></footer>
Basically the trouble I'm having now is in regards to the first row with the two columns. Basically I have a picture in the first one and a bunch of buttons on the second one. Ideally what I would like is to have the header at 100% width so it fits the screen and the contents of the first column stick to the left and the buttons to the right. With the blank space left inbetween the two. So the contents stick to the sides so to speak.
At the moment I'm using float:left on CSS for the first column, I've been messing around with float/align/position but I can't seem to get anything to work.
So any advice on that I would appreciate it.
I also had another question in regards to the footer, basically I have no idea how to even go about doing it. So just asking if possible and guidance where to look.
So for the footer I was wondering if it would be possible for it, if in between the footer and the browser x-axis there's white space it fits to the screen and the body would strech. Because as of now my body is only at the height of the contents within. So basically general advice on CSS to help implement the style so it fits to the screen.
Header with 2 columns
<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>
Now add desired margin-left to second column div. It will create space in between 2 columns
<div id="wrapper">
<header>
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</header>
<div class="mainbody">
Content
</div>
<footer></footer>
Use this
It is simple structure that can be created as follows (Here is DEMO)
HTML is
<div id="wrapper">
<div id="header">
<header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
</header>
<div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
</div>
</div>
<div="mainbody">mainbody
</div>
<footer></footer>
</div>
And CSS will be
#header{overflow:auto}
header{float:left}
#col2{float:right}
Hope it will help you :)