I have 5 divs, named Header,A,B,C,D. B and C are floating divs inside A. I put a after C.
I have a problem with D (a kind of footer) when B has very long text content.
D seems to stay just behind Header and behind B like z-index lower.
Here is the live site: http://dkm.org.tr/proje/biyolojik-cesitliligin-ormanciliga-entegrasyonu-projesi.html
Thank you.
Ç.
Try to use the clear property after the floating elements.
clear: both;
For example:
<div style="float:left;">B...</div>
<div style="float:left;">C...</div>
<div style="clear:both;"></div>
This should solve your problem
Related
I have a div on the left that contains a name, and I don't know how much long this name can be.
On the right I have another div containing some buttons. The number of them can change so I don't know how many buttons I have.
Using only css, how can I take all available space with the first div before meet the second?
I need having those 2 div always on one line.
This is a final effect that I would have:
http://www.clipular.com/c/5701413332058112.png?k=SiP2DmbxmooYIXxUlrAI6uP1OA0
Add some code you will get a better response.
It all depends how you are displaying.
If its a menu then with ul li a then just give them the attribute in css
Display :inline-block. This will render them in a line
Sorry just ré-read. Divs will be different.
You can do it with absolure positioning but i think you should throw some code on that you have tried for easy editing
You can use display:table on the parent and display:table-cell on the children. Assign no widths and make them not wrap.
Here's a rough example:
https://jsbin.com/yibosi/1/edit?html,css,output
<div>
<div>first content</div>
<div>second content</div>
</div>
CSS
div {box-sizing:border-box;display:table;border:1px solid red;width:100%;}
div > div {border:0px;display:table-cell;white-space:nowrap}
I'd like to horizontally align (for whatever screen resolution) the 2 main blocks.
One has a float:left.
If I set margin-left:auto to .site (main content block, at the right), it gets horizontally aligned. The problem is that I don't know how to have the sidebar (the block at the left) aligned too. It's difficult because I need to be sure that the menu gets perfectly "attached" to the content block (so I can't use position:relative;left:XXpx because it changes on different resolutions).
Any ideas? :)
EDIT: If possible, solutions that work with IE 7-8 too (unfortunately) :D
I might be missing something here, but you just want to get 2 block elements and make them center-aligned horizontally?
Just wrap them in another div and align that wrapper div with margin: 0 auto.
Check this link.
<div id="#wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
EDIT:
Of course that you have to float the Content div as well (and not only the Sidebar)
I have a div containing a number of inner divs with varying heights in order to create a two-column output similar to Facebook timeline, kind of like this:
<div style="width:600px">
<div class="boxsample" style="float:right;width=50%;">Content-right-1</div>
<div class="boxsample" style="float:left;width=50%;">Content-left-1</div>
<div class="boxsample" style="float:left;width=50%;">Content-left-2</div>
<div class="boxsample" style="float:right;width=50%;">Content-right-3</div>
</div>
The problem is that whenever the last left div is higher than the last right div, the next div always floats to the left of the last right one like this:
http://postimage.org/image/fi5ndamk5/
It appears to treat the hanging div on the right as a constraint that makes is float to the left of it.
How do I ensure that the float:right divs always actually float right?
(I am doing a while loop to fetch the content from a database, and I want to to specify the column the div belongs to just by using float, kind of like in Facebook timeline.)
You can use clear: right with the float: right divs and clear: left with the float: left divs. See this JSFiddle for reference.
I think I need some more assistance with the concept of floating. This time my question revolves around floating two or more elements to the left. How does this work exactly? I know that a float lifts the children of the element off the page and moves them all the way to the left. All other elements respond by wrapping around... but how does the concept of floating two elements apply to this?
Here is what I understand: Say I have two DIVs, a and b. Float a to left, b's content will wrap around it... but if I float b to the left... How does the content respond to a?
EDIT: Here is something I was messing around with to see if I could understand this concept.
The first DIV has an inline style that floats it to the left... But see how the second DIV with no inline style margin is all wacky?... It doesn't show this wacky margin when the DIV is floated to the left also.
Edit: I know inline styles are bad... I was just using them to showcase an example here.
Here's a series of very comprehensive tutorials: Floatutorial. By following the tutorials it becomes very clear how floating works.
To answer your specific question: When you have two elements with float:left, then the surrounding content will wrap the second element, then the first if there's room left.
Example: http://jsfiddle.net/ak736
If you look at my Jsfiddle Example, the float seems to disregard the title text that is to the left of the floated element. My goal is to make the floated element not overlap the title text and to stop once it reaches the end of the div which is the title text
My questions, is this possible?
I just do not want it to overlap the element which is to the left of the floated element.
Thanks in advance for the advice, suggestions, etc.
Jsfiddle.net
Remove Position: Relative from your #advertisement_1 div, and in the HTML put it above the title div.
Below is an updated JSFiddle with it working, you may need to adjust the "top" value in your CSS for the advert box if it needs to be different to what is in the fiddle.
http://jsfiddle.net/f5j2z/