I´m using the 960 css grid files for a web layout and it works great, but for this layout I need to overlap the divs.
And if I have 2 columns side by side I can overlap the left one by setting class="pull_1" on the right one.
<div class="grid_2">
<p>
<img src="../star.jpg" width="236" height="329" style="float:left;">
</p>
</div>
<div class="grid_2 pull_1">
<p>
<img src="../star.jpg" width="236" height="329" style="float:left;">
</p>
</div>
But if I want to overlap upwards? Yes I can set margin-top:-50px; and that will overlap
both to the left and upwards.
<div class="grid_2">
<p>
<img src="../star.jpg" width="236" height="329" style="float:left;">
</p>
</div>
<div class="grid_2 pull_1" style="margin-top:-50px;">
<p>
<img src="../star.jpg" width="236" height="329" style="float:left;">
</p>
</div>
I want to great a layout like this and I just wonder if this is the way to do it or if anybody has some better way to do it?
Thanks!
If you give all of your divs a CSS rule of: position:absolute, you can then set top and left position offsets to create a layout like the one in the photo you posted. Make sure the divs are ordered from back to front if you want the get the layering correct..
Here's a very simple example of what you could do with absolute positioning:
http://jsfiddle.net/ZqRgj/1/
Related
I am using this structure but
<div class="row">
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
</div>
For some reason the has as much padding as it would take to "match" the next div in the horizontal row. For example, if the first div is text, then the second is text, and the third is an image...the first two divs "grow" to be the size of the third. I thought with this Bootstrap 4 it was supposed to be flexible? Thanks.
Bootstrap 4 utilizes flexbox (display: flex) for a lot of it's layout, including it's cards. That is the reason that all the cards grow in accordance to it's siblings. You can learn more about flexboxes here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
You're using col-sm-4 which will make all the columns be the same size which may be what you're referring to as the first two divs grow. If you mean something else, I would look into how Bootstrap 4 works with flexbox which may also help you understand how the columns act in Bootstrap 4
Sometimes the images can push out the divs. Set a style to the image to be width: 100% and see if that makes any difference
Ok this works. Thanks everyone above for your help, I took many things from it to get the answer. It turns out if I'm reading this correctly flex itself won't allow for "three columns with shrunken divs" so one div can be bigger than the others but they all shrink to their own respective sizes around their content. So I used Masonry. I just included the .js in my head section as a script reference then added the below. If you aren't using .NET (meaning you're using PHP) just erase out the itemtemplate and repeater stuff...the code is the same for you.
<div class="row" style="display:flex;" data-masonry='{ "gutter": 0, "itemSelector": ".col-4" }'>
<asp:repeater id="ItemsList" runat="server">
<div class="card">
I have bunch of floated divs that I want to distribute in a 2-column system.
The problem is that too much vertical space is generated in the left hand column between the boxes.
The divs are all in one big container, so it's not actually 2 columns, markup-wise.
Can someone advise me on how to maintain the tightness between the boxes and still honour the alphabetical zig-zag order?
<div class="tag-box">
<div class="heading">
<input type="checkbox" data-field="county">
<span class="heading">Blekinge</span>
</div>
<div class="tag-group ui-helper-clearfix">
<div>
<input type="checkbox" value="23" data-field="br">
<div class="tag">
<div>23</div>Karlshamn</div>
</div>
<div>
<input type="checkbox" value="22" data-field="br">
<div class="tag">
<div>22</div>Karlskrona</div>
</div>
</div>
</div>
The only way you can get rid of the spacing is use 2 wrappers. An left and a right wrapper which each contain the tag-box's you need.
The tag-box's will be floating against each other within there parents and not create extra space.
Here what happened is according to right column content your left column also expands. So split it into 2 different columns and place your content over there.
HTML:
<div class="container">
<div class="left-col"> .. your content goes here.. </div>
<div class="right-col"> .. your content goes here.. </div>
</div>
Related to my earlier question
I would like to be able to align the pull-right div to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<div class="pull-right">
<img src="img2">
<img src="img3">
</div>
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to get the pull-right (or other div classes) to align to the bottom of the footer-images div class.
If I understand the question right. You just have to make sure you float the elements inside it (the tags). But it will only be aligned from the top if you have different image sizes.
Would be much more easier to give you advice if you can show us an image of what you want to do and what does it look like as of now. (Would be better if you also show the css)
So I want to code the content section that displays the title, author and the post itself, the code I'm using is where I want the title on top on one row, then the author on another row and content on another:
<div id="main">
<div class="container">
<div class="title">Title</div>
<div class="author">Author</div>
<div class="content">
Content here
</div>
</div>
</div>
or would span be a better choice like this?
<div id="main">
<div class="container">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="content">
Content here
</span>
</div>
</div>
Or is there a completely different and better way of doing this?
Thank you.
Maybe you should try HTML semantic markup instead of divs?
<section id="main">
<article>
<hgroup>
<h1>Title</h1>
<h2>author</h2>
</hgroup>
<section>
Content
</section>
</article>
</section>
div is grouping content and span is text-level semantics. Of the two examples given, the latter is what you'd be better using:
<div id="main">
<div class="container">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="content">
Content here
</span>
</div>
</div>
Depending on what is contained within .content you may want to use div for that, however.
To properly conform with the specification you should use cite for the title. Equally, if your .content is a quote or extract you should use q or blockquote
<div id="main">
<div class="container">
<cite class="title">Title</cite>
<span class="author">Author</span>
<q class="content">
Content here
</q>
</div>
</div>
It doesn't matter. All of the answers espousing one over the other are fine, but pretty much arbitrary opinions.
In the end, both DIV and SPAN are just generic containers. They don't mean anything in and of themselves.
So, if you have to choose between one of those two, it doesn't matter. However, due to your one requirement:
is where I want the title on top on one row, then the author on another row and content on another
...I'd suggest going with a DIV for no other reason than a div, by default, is a block level element, meaning it will automatically be formatted into individual lines for you.
All that said, everyone that is suggestion that you perhaps consider a more semantic container is spot-on. Would this be better treated as a ol? Or perhaps even just p tags?
The <div> tag should be used for dividing up your page into logical blocks. Here a <span> would be more appropriate.
However as you're displaying text what's wrong with something like:
<div id="main">
<div class="container">
<h2 class="title">Title</h2>
<a class="author">Author</a>
<p class="content">
Content here
</p>
</div>
</div>
After all, they're designed specifically for text.
If the question is only a choice between div and span then the answer is...
span is used for the individual elements, and div for blocks.
The second variant is better than the first.
See Grouping elements: the DIV and SPAN elements for more info.
Here is quote from there:
These elements define content to be inline (SPAN) or block-level (DIV)
I am trying to affix a callout image to the top right of a page, but I do not want it moving once the screen is below a certain width or else it will begin to overlap other page elements. Does anyone know what the best way of going about this is? Thanks!
Standard CSS practises tell us that each element on the page should be encapsulated as a block:
<div style="float:left;">
<div style="float:left;">
<img src="picture.png" />
</div>
</div>
This kind of style allows elelments to stack on top of one another, preventing overlap.
In your case, it sounds like you have a header, and you need a picture fixed in the top right:
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
But you also mentioned your page should have a min width, so that when a user tries to contract the width, elements do not overlap horizontally:
<body style="min-width:800px;">
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
</body>