I need to create following page layout using Divs.
http://jsfiddle.net/6Lanq/ (please use horizontal and vertical scrollbar to see the exact picture. we have four zones)
I accomplished it using nested divs and float but nested divs are not what is required. Other way of doing, that I know, is declaring "position:absolute" and setting z-index but this required exact top / right / bottom / left locations which are not desired.
It is possible to do the same without using nested divs and exact coordinates? Some find of float or dynamic solution?
You'll have to use Position:Absolute, then, if you use Top and Left to set the position it will take the entire page, but if you use Margin-Top and Margin-Left, it will take as a reference the parent DIV.
Related
I have a lot of divs with different size and width. I would like to automatically place them inside another div and position them like:
Anyone know what css properties should I use? I tried with floating + display (several combinations) and nothing works for me correctly - I had divs in one line -> a lot of space (because one big element) -> next line -> and so on... and so on...
Without using Flexbox you will find it hard to acheive this layout.
Flexbox layout example
You could use a JS plugin such as Masonry which will enable you to acheive the layout.
If I understand correctly, what you want to do is place them in a container that has a set size (and probably expanding height according to its content) and then line them up the way you show. The easiest way I can think of is using Twitter Bootstrap. It has a container class and then you can align your elements within divs and it will also make it automatically responsive.
Tip: Avoid using position: absolute and height: wherever you can because it messes with the flow of your site.
don't forget to clear your floating elements when needed.
I am trying to make a expandable menu which should get on top of one div and push some other divs down.
A mockup of what I am trying to do:
And a concept Plunker:
You're using Bootstrap and in order to achieve your desired behaviour you should "extract" TITLE div from document flow, for example using "position:absolute" and then move it to accomodate to deisred position.
Don't forget that you must extend it more than 100% in width... and push on the left with negative left position.
I positioned two div elements side-by-side by using float= left;
But buttons are getting displayed beside the div elements.
I want the button elements right below the two div elements which were placed side- by-side.
When you use float:left property then the div's height and width are set by either of the following
amount of space it's content html elements require
applied css height and width.
hence say if your screen if too big and space is left out on the sides then the next element (if it can be fitted in that space) is rendered (if it requires more then it would appear on the next line).
hence now regarding your problem there are two possible solution's
Increase the widths of your div so that it takes most of the screen width.(mostly never used as it might look ugly on big screens)
but if u want to go by this approach the setting the width's in percent can do the job.
Fiddle demo
use the clear:both property of css (mostly used)
for it's explanation you have to read it's documentation
i would suggest you go by this approach
Fiddle demo
This is the page: propertytest.uphero.com
I have narrowed down the problem to the 6 blueish boxes (the top 3 are under a div called offers and the 3 below that are under a div called properties). If I was to take them out, the space goes but I would really like to keep them in so I need someone to help me troubleshoot it so that I can keep the boxes and have no space below the footer.
I think my problem lies with the fact they are positioned with relative (all divs are positioned relative - bad idea I now realize that).
I have tried:
aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom/right however if I was to scale down the browser, the boxes go out of position..
removing all positioning and floating them to the left/right - removes the space at the bottom/right but doesn't go into the position I would like them to ( I don't think you can position floats with top/bottom/left/right or margin? )
Here is how to sort out the 6 boxes that you currently have as position:relative;
http://jsfiddle.net/F9Q6T/
The basic premise is that you float the boxes inside a container and then clearfix them to make the container the right size.
In terms of the issue at the bottom of the page you need to remove bottom:290px; from your footer. This appears to be what is causing the problem
I think main problem is body background image. You have used image of 1300px * 1000px size. i think you must use image of 1px width with repeat property.. And white space at bottom come due to bottom property of orders and properties div`
thanks.
How positioning can save our time if we use in place of float on some place in layout coding?
How we can judge where positioning would give better result?
For example (i added just for example) if this is a design
So far i only use float + margin + padding, now if i can mix positioning and save time and get pixel perfection easily then float.
Guide me
Thanks in advance.
Update 1:
these are common elements of website. should i use positioning for any of them?
The Header
---logo
---serch box
---The Navigation Menu
---top links
---Breadcrumbs
The Text Area
---Paragraphs
---images( left , right or center align)
---Tables
---vertical ordered and unordered list
The Sidebar
---vertical ordered and unordered list
The Footer
---copyright
---Important Links (horizontal list)
Form elements
Update 2:
Does positioning have any
Compatibility issue(including IE6) than float?
Is positioning is only good for fixed
width design or it's good for both
liquid and fixed?
For that layout, you don't need to use nothing else than floats, margins and paddings. Positioning (relative, absolute, fixed) should be used only in 'special occasions', eg. when you want to lift an element out of the document flow and place it somewhere it would be otherwise hard to place.
You won't save any time and won't get any more 'pixel perfect' results with positioning. You should be able to do that using traditional methods.
The only reason you should use absolute positioning in that layout is because of the RSS icon, that's a 'special occasion' I was talking about.
Looking at the design there is minimal need to using positioning, the only I can see it may be need is t give the overlapping effect on the RSS icon but even then you could do some trickery with background images to give the effect that it is overlapping.
On my sites I use position if I need to give the user the experince that elements overlap outside of the box model. Otherwise you should be fine floating, padding and using margins.
One tip howerver if you are using position:absolute; make sure the parent element has position:relative;