The question is very simple: how to PROPERLY avoid table for layout.
Problems: DIV layout with float:left is not always useful because often at browser stretch all divs pile one over the other...
I have a container div
<div id="container">
<div id="child1"> </div>
<div id="child2"> </div>
<div id="child3"> <div>
</div>
Container 100% page.
child 1, 2 width fixed width ( exampe 300px) and the 3rd width variable width 30%
I whant them not to pile one over the other on browser stretch.
Is it posible ? Thank you
http://thoughtsandideas.wordpress.com/2010/07/15/introduction-to-div-based-layout/
don't use tables for layouts. maybe the link can help you.
You should ALWAYS avoid using <table> for layout. <table> is made to display tabular data. That is it's purpose. If you use it outside of that purpose, then you are using it wrong. Additionally, if you can't achieve the layout you want using float's or display: inline, then you are most likely doing it wrong, or need a little bit of javascript to help you out until the flexbox functionality is fully implemented and supported.
See this post here for further explanation: Why not use tables for layout in HTML?
Related
I'm using bootstrap, angular and angular-ui-router
what I want to achieve is this mockup:
where the menu on the left is a navigation bar, a toolbar on the top, some breadcrumbs, content and a footer.
I can get all these elements in place. However, I need to populate the content with a variable number of elements from a rest data source. I want to wrap these nicely, so I am using the following angular / html
<div class="col-lg-12 ">
<div class="row">
<div class="col-md-4 " ng-repeat-start="item in $ctrl.items">
<div> card details here </div>
<div class="clearfix" ng-if="$index % 3 === 2"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
this works, and shows all the data. However, as there is more data than can fit into the div, scrollbars appear on the window
What I would like to acheive is to get the scrollbar to appear in the content div , like the screenshot
I have tried all sorts of css, like overflow: scroll-y, but can't figure it out.
Your problem seems to be related to dynamic heights. Using fixed heights (also %, vh, ... are useable), you can get that layout to work properly. There are a lot of solutions for that.
1. Using %
If you're going to use %, and that would by far be the best option, you have to start at the root tag which basically is <html>. After that you've to add the proper height value to it's child elements you want to use. Keep in mind to start at 100% and shrink your child element to the desired heights.
2. Using vh
The vh value is kinda same as %. You just don't need to set a height to every parent element. Demo
Note: You may have to check if that's working with your target browser.
3. CSS3 calc() function
Propably the newest method. You can calculate values through CSS(3), by using e.g. calc(100% - 100px). That's pretty cool though, but also isn't supported by every browser. See here.
4. Fixed layout
You could also use some fixed positionings. Setting up your footer, header and nav to position: fixed; would also keep up everything smooth and clean. I'd use a fixed layout in order to get that done, since I'd like it the most. Also it doesn't have any incompatibility with legacy browsers.
instead of overflow: scroll-y,
please try:
height:100%;
overflow-y:scroll
*giving it a height enables the scroll bar to appear.
I have created a grid of images using Bootstrap 3's .thumbnail class. Everything seems to be working great with regards to the images resizing, and the columns changing depending on the window size. The only problem is the images are all different sizes, and both portrait/landscape orientation. This causes awkward breaks and "pile-ups" with the thumbnail divs…
I was hoping to find a way to create a grid of SQUARE responsive divs using the .thumbnail class. So in other words, the width determined by Bootstrap would be mirrored in the div's height. E.g. the thumbnail image is scaled to 220px so the height of the div containing it would be set to 220px as well (and the thumbnail image inside scales up to 100% of eight the height or width, depending on orientation). Sort of like this:
Here is the basic code I'm using:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="<?php echo $image->url() ?>">
</div>
</div>
</div>
Thanks so much for any help you might be able to offer. I'm also open to suggestions for other approaches. I even tried using jquery Isotope's masonry setting to solve the pile up problem but couldn't get it to work :(
You could try a CSS only approach like this this..
http://bootply.com/85737
However, this is not cross-browser compatible so you still may want to use the Isotope plugin. Here is a working example that uses Isotope + Bootstrap..
http://bootply.com/61482
I have created a small plugin for bootstrap, called bootstrap-grid-h. You can try using it. It is css only solution. You can find it here: bootstrap-grid-h
For something like this I would recommend using masonry which will give you a pinterest effect where images will fit in a block style without breaks.
such as: http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
I must code an html viewer which take some objects as input and provides a nice html layout. For the layout part I decided to use twitter bootstrap 2.3
prerequisites
The objects are represented as divs of different size
I don't know the number of divs to display in advance
Now, what I want is an "auto-adjusting" layout able to displace in the most convenient way the object in the screen. The concept is sketched in the following image:
on the left you can see the objects, on the right the desired final diplacement.
I nearly get it work in this way:
<div class="row-fluid">
<div class="node span6">a box</div>
<div class="node span6">a second box</div>
<div class="node span6">a third box</div>
<!--as much divs as you want-->
</div>
but in the second line I get a bad "tilted-right" effect due to the margin-left settings of the bootstrap css.
I also tried to override the css specification of the span to adopt a margin-right driven approach but with no luck (if it is interesting I can provide info about this approach).
Any suggestions?
You can do this by using bootstrap and the :nth-child pseudo selector. However, this that you are trying to accomplish will also require that you make CSS changes beyond the simply .span's left margin... You will probably need to re adjust this with smaller #media queries and it's probably outside the scope of this question to show you how to do all that, however... this should get you going:
Here is a jsFiddle
The fiddle above has bootstrap loaded... I'm making a container with the class .row-fluid in which I'm adding many .span6's, but I am also making sure that on the third and then every two more .span6 it's removing the left margin so it stacks two and two .span6 per row.
You can read more about the :nth-child pseudo selector here
I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!
When I specify a height in the style for any element inside of this, IE makes the entire thing 100% width, rather than keeping it "autosized" for width.
Other browsers display it fine, but not IE. How do I fix this?
<div style="position:absolute;top:50px;left:50px;background:green;">
<div>
<div>test</div>
<div style="height: 20px;">this makes it 100% width in IE. why?</div>
</div>
</div>
Thanks!
Here's something that may work for you. It's a little hacky, but if you're trying to find a good width for some text, this is the only way besides javascript that I know of. We're basically forcing the width by not allowing the line to break. You can put in <br/>s if you need line breaks.
<div style="position:absolute;top:50px;left:50px;background:green;width:0px">
<div>
<div>test</div>
<div style="height:50px; white-space:nowrap">This is normally sized in IE6</div>
</div>
</div>
On second thought, don't check out the link. It's old and doesn't work as advertised.
Old answer:
http://snippets.dzone.com/posts/show/216
I believe that non-absolutely positioned DIVs automatically expand to fill their container horizontally. Since you haven't specified any container size for this div, it expands to fill the whole page.
I find it odd that Firefox doesn't expand the div... I'm not sure which of them actually has it "right".
At a guess, I would say it's something to do with the hasLayout bug in IE6. My suggestions:
1. Give the containing div (the one with the absolute positioning) a set width.
2. Post an example of what you are trying to achieve. We might be able to suggest a more all-browser friendly way of doing what you want.