I currently have the following html:
<div>objA</div>
<div class="tower">objB</div>
<div class="tower">objC</div>
<div class="tower">objD</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>
I'd like to tower(align vertically) the divs in class "tower" so that the following image can be reproduced:
Instead, what I currently have is the following:
http://jsfiddle.net/kAMB5/
Are there any ways in which I could go about achieving my wanted result purely through css? (preferably without changing the html content)
UPDATE: You can assume these are fixed width divs.
You need to put objC and objD divs inside objB div like this: DEMO to achieve desired result:
HTML:
<div>objA</div>
<div>
objB
<div class="tower">objC</div>
<div class="tower">objD</div>
</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>
You need an extra div wrapping your .tower as in: http://jsfiddle.net/kAMB5/4/
Apart from that, CSS Grid Layout (IE10) or on your .tower CSS3 flexbox (still need a container I guess) could achieve the same result but with lesser compatibility
Related
I'm trying to use flexbox to create dynamic templates where I would mix elements in horizontal and vertical directions without creating wrappers for each group.
I have for example this kind of structure:
<div id="wrapper">
<div id="zone1">
zone1
</div>
<div id="zone2">
zone2
</div>
<div id="zone3">
zone3
</div>
<div id="zone4">
zone4
</div>
<div id="zone5">
zone5
</div>
The wrapper would use display:flex and each children would be set at 100% for mobile screens like this:
My fiddle here: https://jsfiddle.net/laurentw/2myL6h45/2/
Now when the screen goes bigger, I'd like to do this
If I keep the divs as individual divs, I'm running into trouble because I have two different directions:
Fiddle example: https://jsfiddle.net/laurentw/wogmdxL5/4/
And then finally for much bigger screens:
I would like to keep all those divs separated so that I can try out multiple templates without altering the code. I want to influence the order (easy) but I would also like to control the direction and occupied space.
Is that something I can achieve with Flexbox without any additional JS?
Thanks
I'm sure this is some stupid CSS mistake, but in this template website I'm making, whenever I put more than one line of text in the content div, it misplaces the two background divs on either side of it. Here is the HTML and CSS:
http://pastebin.com/txmQzbx3
I have tried everything I can think of, but I don't know what could be wrong with it.
First, there's no such thing as float:center. If you remove that and change the position value for your content div from relative to absolute, then it works.
http://pastebin.com/B9tXgXYj
If you want to keep it fixed width then just add float: left to the content css
If you want to have it fluid then you'll want to take a look at using the display: table|table-row|table-cell css properties to do it
Try placing your backgroundright div above content div,
<div id="backgroundright">
</div>
<div id="content">
<p></p>
</div>
Hope this helps
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?
Please see the fiddle below to see the code and result:
http://jsfiddle.net/jhacks/nnZWB/7/
I am trying to get two divs to float:right within their parent div that doesn't have a defined width. It works if I set a defined width, but as one of the children divs needs to have a variable width, I simply want the parent div to just stretch to fit the children divs. However, as you can see from the fiddle, they don't want to float horizontally for me.
I've tried adding a few different styles (e.g. overflow:hidden) but can't get it to work.
Any and all help is appreciated. Thanks!
If the problem you are refering to is within the div topProfile then you just need to add float: right to topName.
If this is not the problem then you might have to include an image to help represent how you would like your layout to look.
Move the topProfilePic div inside the topName div.
<div id="topName">
<div id="topProfilePic">
<div id="pic"></div>
</div>
<a class="topText" href="name.html">Your Name Here</a>
</div>
http://jsfiddle.net/nnZWB/8/
ok this header image is driving me crazy-- ive cleaned up the divs and edited the css - before i learn positioning etc, id love to see a quick fix that just puts that image down at the bottom of the page
sorry, the question was in the title-- im trying to get the footer not to float on top of the page but ive gotten some responses about absolute positioning so ill try and work on that myself, additional answers still appreciated, thanks
http://we-live.in/the_sierra
<div style="text-align:center;">
<div id="footernav">
Home
About Us
Contact Us
</div>
Your main content div appears to be the div with the id "to_div". Your footer floats to the top because you've used position:absolute on to_div which takes it out of the flow. Either absolutely position your div on the bottom or stop using absolutely positioning. I recommend the latter.
That happens because you have set up to absolute the position of each div (to_text, nav_deals, etc.) but the div that contains the footer is rendered as a normal div element (because its position is not absolute)!
I suggest to redo this simple layout without the absolute positioning! Or you can solve by setting to absolute even the position of the last div!
The problem is that you are using absolutes. Absolutes do not affect the flow (in other words for the positioning of other elements it's as if they don't exist).
Do something like this (I've put the css as text)
<div id="wrapper">
<div id = "main">
<div id="to">FLOAT:LEFT</div>
<div id="from">FLOAT:RIGHT</div>
<p class="extro">CLEAR:BOTH</p>
</div>
<div id="footer"></div>
</div>