I am putting together a series of boxes with lists in them of variable lengths. The boxes are all the same width, but of varying heights. I would like to have the boxes populate on the top of the screen from left to right across the screen forming columns, with the number of columns dictated by the width of the screen. The problem that I am having is vertical gaps in the columns when the boxes wrap around. Please view the following pages with your browser at 850-1150px wide so that the content appears in 2 columns.
Using float:left I got this result
I found an example of another way to do it using display:inline-block; vertical-align:top; which looks better, but still has some vertical gaps.
The complete css code that I'm currently using on the page is as follows:
div {
display:inline-block;
vertical-align:top;
padding:15px;
border:2px;
border-color:#000;
border-style:solid;
width:400px;
}
with the content being a bunch of <div>CONTENT HERE</div> boxes.
Thank you in advance for any help, it's much appreciated.
Solution using Masonry: Go to the masonry site masonry.desandro.com (listed above by nevermind in the comments), and download the "masonry.pkgd.min.js" production file. In the header of the page where you want the grid to work, reference the masonry file. In the body of the page, create an outer div container using the "Initialize with HTML" code snippet from the above site. Within that block, have div containers of the class "item" (or whatever the itemSelector is set to). Please note that you cannot format (at least that I can tell) the div class="item" so if you want to have a box around your content like I did, you will need a 3rd div within the floating div to perform that formatting.
Related
The problem is (which you can see in the pictures below) that the "doner", "Wallet", and "Amount" aren't centered on the page.
I've tried changing the margin and padding and moving divs around and etc, but nothing seems to be working and I don't understand what is wrong or how to fix it. (it is hard to see in the code snippet because it's not full screen so I'm just going to give a link to the HTML here)
The only issue I can find is when I inspect element on google chrome. When I hover my mouse over <div class="container"> (the one underneath div class="learn-more">) It shows that the div container is wider on the right side, but I can't find why!
Thanks for the help! If you need any clarification please ask, I couldn't find anything to fix my problem online so I came here.
Here's a picture of what I mean as well:
The essential problem with your code is the markup. You're using the Bootstrap & putting some div directly inside the container & then another container inside this div. See what I mean:
Here are the first three rules from the 3rd Bootstrap documentation you should follow when building your HTML:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
So, my suggestion is to revise your HTML layout and use the Bootstrap as it intended instead of applying some hacks.
Start from rearranging containers in the way that the content would be put inside columns and all of the wrappers would be outside of the containers or inside the columns.
put your content that you want to center in a div like
<div class="box">your content...</div>
in your css file just add this :
.box{
display:inline-block;
position:relative;
left:50%;
transform:translateX(-50%);
}
you can also use a float left for your 3 titles and set the same witdh and height for the three with text-center proprety
I am trying to setup a website that consists of two main areas: navigation and content. The navigation portion needs to take up the full height of the left column. The main content will be in the left column. In an attempt to set this up, I'm using the following CSS:
<div class="full-height row">
<div id="navDiv" class="four wide column full-height" style="background-color:#40546C;">
<!-- Nav COntent goes here -->
</div>
<div class="eight wide column">
Main Content
</div>
</div>
I've created a fiddle with the full example here. What I'm trying to do in the nav column is three things: show a title, have tabs aligned against the bottom of the screen, and have the tab content take up the remaining space. Unfortunately, I'm not having much luck in getting this working. Specifically, I'm having problems getting the tab content to fill up the remaining space and the tabs aligned against the bottom of the screen.
Your help is much appreciated!
For future reference, you should try to mention that you were using an external grid system. It took me a couple minutes to realize what was happening and why there were so many classes on things. Not a big deal though :-)
I think this new fiddle should be pretty close to what you're talking about, though:
theFiddle
I first had to set the height of the body and html to 100% so that their children could be 100% as well. I then floated the navDiv left and gave it a width of 25%. You can tweak that width as needed.
#navDiv {
width: 25%;
float: left;
position:relative;
}
I then used absolute positioning to get the tabs at the bottom, and to get the tab content above the tabs.
I added new classes in several places to avoid collisions with the grid library. I also had to use an important to override the margins on the segment class, since I didn't want to remove anything that you were using in your grid.
There may be a way to to this layout using that grid more effectively. As I said, I'm not familiar with it so I just used plain CSS.
Just as an aside, this is one my favorite resources for brushing up on CSS Layout. Thought you might find it helpful:
http://learnlayout.com/
I'm trying to create a div which is part of an image. It will automatically move if the image will be moved (for example, the browser size has become smaller, and the image will move. The div will follow the image). However, I have no idea how to do that. I tried the following method:
<div class="wrapper">
<img src="2.jpg">
<img src="1.jpg">
<div class="play1" style="position:absolute; top:100px; left:100px">Content</div>
</div>
Note: The wrapper has 'relative' as position style
I thought: In case this is impossible, I could create two divs with the image as background. So, each image has it's own div. But, how would I place those two divs next to eachother, and make them "split" if the browser gets smaller. I know how to place two divs next to each other, but how would I make it possible that if, the browser gets smaller, the second image will move below the first image.
p/s For the off-topic voters: I do not have a piece of code for my second question, because I simply have absolutely no clue how I would do that. I could paste a piece of code where two divs are next to each other, but that's all.
float is perfect for this. For each div in question, give it the style float:left; (assuming you want the first one to line up to the left) or float:right; (if you want the first one to line up to the right). The divs will be side-by-side normally, but the second one will get bumped down if they don't both fit.
Here: http://jsfiddle.net/QNEmF/12/
CSS:
#media all and (max-width:500px){
#sidebar, #content { float:none; width:100%; }
}
First make them float when screen(browser) size will get to 500px or lower. they'll switch to above css, thus stacked one above the other.
With Ed Cottrell's help, I managed to do exactly what I wanted. To place the two divs next to each other, I used
display: inline-block;
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
This website http://www.elkaniho.com/ has a CSS layout which is what i want, you see, the divs stack on top of each other, not on a precise grid, but just at the bottom and on the side.
And when you re-size the browser, they all re-adjust perfectly?
anyone know how i can get the same layout like at elkaniho.com or what type of layout this is called?
There is also a neat jQuery plugin called Masonry that can deal with div's of varying width and stacks them up as tightly as possible. Depends on your content.
That's just a six column layout. Easily done with 6 divs:
<div id="container">
<div class="column">one</div>
...
<div class="column">six</div>
</div>
As a fluid layout:
#container { overflow: auto; }
div.column { width: 16%; float: left; }
You can of course fix the widths too.
Each column then has several divs which do what divs (and in fact any block element) do: they stack top to bottom.
The effect you are speaking of is created using javascript. If you look at the source code, you will find a link to a javascript file called funciones.js which includes functions called cajas and cajasInterior that are responsible for this effect. Also note that they are using jQuery.
The functions:
Figures out the maximum number of columns based on the body width, box width and margin
Sets all divs with a class of box and boxInterior to have absolute positions and set their width
Goes through each box and calculate the left and top positions.
I would contact the webmaster of the site and ask permission to use this script and change it to fit your needs.