I have some HTML which looks like this:
<body>
<div id="panel1" class="panel"> Panel 1 </div>
<div id="panel2" class="panel"> Panel 2 </div>
<div id="panel3" class="panel"> Panel 3 </div>
<div id="panel4" class="panel"> Panel 4 </div>
<div id="panel5" class="panel"> Panel 5 </div>
<div id="panel6" class="panel"> Panel 6 </div>
<div id="panel7" class="panel"> Panel 7 </div>
<div id="contentheader"> Header </div>
<div id="content"> Content </div>
</body>
What I would like is for some of the panels (let's say 1-4) to be floated on the left, the others (5-7) to be floated on the right and the header and content in between, ideally without having to wrap the left and right panels in a wrapper div.
Use an easy to use CSS framework like Blueprint CSS, The Golden Grid or 960. They have excellent cross-platform support for developing grid based websites like the one you are working on. You won't have to worry about the nitty gritties at all.
The answer depends entirely on if you want that middle column to be fixed-width or fluid.
If fixed width, your life is going to be much easier, and you can use one of several popular CSS grid systems: blueprint, yui, 960, etc.
If fluid, you should use the 3-column techniques outlined at alistapart.com.
How about wrapping the #contentHeader and #content in a div and floating it like one of your panels? You'd have to put it amongst them... (div1, 2, 3, 4, content, 5, 6, 7).
Depends on what you know about the widths of the panels and content, I'd say.
If you know the width of your panels (left, right, header and contents) and the height of the header, you can give the header and the content a { position: absolute; } and position it between the panels.
If you don´t know the width of the content, you'll probably run into some IE problems though...
(just guessing, I haven´t tried it)
Related
I am trying to get the sidebar to be on the left side of the content and instead the two components stack on top of each other.
the html I am using to style
<div class="bg-gray-600 flex flex-col max-h-min">
<div>
<app-course-info-home></app-course-info-home>
</div>
<div class="flex-row">
<div class="bg-blue-500 col-span-1" id="module-display">
<app-module-display></app-module-display>
</div>
<div class="bg-yellow-200 max-w-min flex-col" id="course-sidebar">
<app-course-sidebar></app-course-sidebar>
</div>
</div>
</div>
The Output
Picture of the output
I want the black box to be all the way to the left like it is, but the top to be the max-h-screen. Then I want the blue box to be to the right of the black sidebar
I see that you're making use of flex layouts - that's good and, once you have them figured out, makes sorting page layouts so much easier. I highly recommend using Angular-flex so that you don't have to play with styling directly, and it makes it easier to read.
An approximation of what you want - written using Angular-flex directives because that's what I can provide faster. Also, as I'm not entirely certain what each of your components relate to (other than the app-course-sidebar, I'm using placeholders).
<div class="bg-gray-600" fxLayout="column" fxLayoutAlign="start stretch">
<div>
<app-course-info-home></app-course-info-home>
</div>
<div fxLayout="row" fxLayoutAlign="stretch start">
<div class="bg-yellow-200" id="course-sidebar">
<app-course-sidebar></app-course-sidebar>
</div>
<div fxFlex class="bg-blue-500" id="module-display">
<app-module-display></app-module-display>
</div>
</div>
</div>
This layout should look something like
------------------------------------
[course info]
[sidebar] [-----module display-----]
------------------------------------
Note that the biggest change is in where your sidebar is within the template. Row layouts, without setting specific orders, are basic left-to-right one-after-another layouts. So if you want your sidebar on the left, put it as the first child.
The root div is column layout, so the course info div will be placed above the grouping div.
The grouping div is row layout, so the sidebar and module display child divs will be displayed besides each other.
The module display div makes use of fxFlex to make it take up whatever space it has available for width, pushing the sidebar to the left so much as it's able (control how severe that is by setting a min-width on that sidebar if you don't want it to look too squished).
In Bootstrap, must all content- even just a basic block of text placed in the middle of a page for example, be placed inside columns and rows. My website seems to work just fine doing this:
<div class="container-fluid">
<h2>My Heading</h2>
<p>This Is Content On the page</p>
</div>
Yet, I have been told it should be like this:
<div class="container-fluid">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid</div>
</div>
</div>
Yet, on some of the templates on the bootstrap site itself, they don't always use columns and rows.
I'm really confused...
Thanks
No, not all content needs to be placed in .rows.
.rows and .cols simply provide you with a customizeable grid system (i.e.: number of columns, gutter sizes, responsiveness breakpoints are a few of the things one could customize) aimed at displaying content differently at various page widths. That (and also the division of the row in 12 columns) are what it was designed for.
The only purpose of rows and cols is to divide the space differently at different page widths and to provide some minor padding (gutters). If you don't need that for a part of your content, don't use it. Whenever you have a section which you want displayed according to your own custom rules, you can simply include and style it as you want.
So, for example, this is perfectly valid and can be seen in various Bootstrap examples:
<div class="container">
<div class="row">
<div class="col">
... normal layout cols here
</div>
</div>
<div>
your custom stuff here. you need to provide responsiveness CSS rules for this content.
Out of the box, being a `<div>`, this will fill all the available width
if, for example, it was included in a `.container-fluid`,
it would span the entire browser window, at all screen widths.
</div>
<div class="row">
<div class="col">
... more normal layout here...
</div>
</div>
But whenever you want to use .cols, you should place them as direct children of .rows. If you do not, you will see some nasty horizontal scrollbars across your content, because the grid has a system of negative margins and (positive) padding to cater for gutters at various width sizes.
With this basic example everything works fine, especially when the heading is centered. Using different approach for Bootstrap grid is usually not a good idea.
From Bootstrap docs:
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
As alignment problems will occur in the long run.
Secondly when you start using SASS with Bootstrap and change grid variables then everything stays aligned and is controlled from
one place.
In your example if you want to align the heading you need to add a margin-left so that is would be aligned with I'm content inside the grid.
Look at this example how everything is aligning with and without rows/columns: https://codepen.io/LaCertosus/pen/KKKzVqR
<div class="container-fluid mt-5">
<div class="row">
<div class="col">
This text is inside <b>row</b> and <b>col</b>
</div>
</div>
<div class="row">
This text is only inside <b>row</b>
</div>
<div class="col">
This text is only inside <b>col</b>
</div>
<div>
This text is only <b>container</b>
</div>
</div>
<div>
This text is outside <b>container</b>
</div>
It is the right question to ask why I have to generate so much boilerplate but it will come out in the long run when elements need to align and scale in different screen sizes.
I am using css to design in my WooCommerce site. My page look like this
My code like this
<div class="row">
<div class="col-md-3">Stenner Tube Assemble column.......</div>
<div class="col-md-3">Image with buy now column....</div>
<div class="col-md-3">Image with add to card column....</div>
<div class="col-md-3">videos and tags column....</div>
</div>
<div class="row">
<p>In many industrial application ...</p>
</div>
I want bottom space at first three column should be filled with description which is on next row div.
I tried with different css properties such as, position, margin, flex, padding etc, but not got result.
Is it possible in css or any other way. So extra white space covered with text.
Thanks
Recently I have been introduced to bootstrap and RWD. I have understood the whole idea but I cannot seem to master the grid system. I created a div container to make a fixed design. I want to use grids but I have lots of spaces in the webpage. Meaning it is something like this:
Header
about 10 lines of free space
Content / Content / Content
about 5 lines of free space
Content
How do I design my webpage like that using grids? I guess what I am asking is not how, but what is the efficient way to do it. I do not want my code to be messy. Thanks.
<div class='container'>
<div class='row'>
<div class='span12'>HEADER</div>
</div>
<div class='row'>
<div class='span4'>CONTENT</div>
<div class='span4'>CONTENT</div>
<div class='span4'>CONTENT</div>
</div>
<div class='row'>
<div class='span12'>CONTENT</div>
</div>
</div>
As for the lines of free space, add margins as needed
I can't figure out why my navigation at the bottom of this page ("prev" and "next" links) are longer than my #bloglist post teaser that are above width wise. I'm using twitter bootstrap out of the box and am using the scaffolding that they offer.
http://www.b-lew.me/page/3/
any thoughts or suggestions would be much appreciated!
There are some markup inconsistencies :
Each of your rows should be a .row containing a .span12 (and you won't need your .margin-left class)
Almost everything is floating, and float: left elements will not fill their container to their right
clear: both is not needed, just use the .clearfix class for the container, but you usually won't need it
Here is the markup I tried :
<div class="container">
<div class="row">
<div class="span12">
<div class="well bloglist clearfix">
<!-- etc -->
</div>
</div>
</div>
</div>
And for the css
.bloglist should not be floating left.
It appears that there is a lot of residual markup from another design, and IMHO you are going to have a lot more graphic bugs if you don't stick to the proper bootstrap architecture.
It appears you are expecting the overall size to be span12, evidenced by </div><!-- /span12 --> However! You do not have this class declared in the opening block anywhere, and your bloglist items are span4 and span7, so the overall size would be span11. I edited a bloglist item to be span4/8, which seemed to align with the pager. I would revist your opening markup to get it to the expected size