CSS - element positioning using float does not work - css

I'm trying to position two panels and just can't get it to work...
I have a container-page wrapping two panels, each with it's own page. I want to position the panels side by side using float.
This is my CSS:
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: static;}
and HTML
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
</div>
I have to use position:relative for the left panel and position:static for the right panel. Strangely this works in JSBin but in my actual page, the right panel with position:static always has 100% width covering the whole screen.
Any hints on what I may be doing wrong?
Thanks!

div elements by default have a width of 100% of their parent. Since you floated the lefty div you took it out of the flow so what is happening is that the lefty div is effectively sitting outside the flow of the elements. Also float causes the div to shrink-wrap to the size of it's children. So if you are wanting to set the righty div to but up against the lefty div then you should do two things: first add float:left; position:relative; to the righty styling. Second you should add a div at the bottom of that to clear your floats.
On another note you should only use a class if you are going to be styling multiple elements the same way, otherwise just style the element off of the ID.
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: relative; float: left;}
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div style="clear:left;"></div>
</div>

Try floating both of the panels? As of right now only the left one is floated... try floating both of them to the left and then putting the correct amount of margin between them to line them up like you want them. Or even floating one left and the other right would probably work.

Add this to your CSS,
div.clear-both {clear: both;}
And change your HTML to this:
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page"
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div class="clear-both"></div>
</div>

Related

How can I separate areas with floats from each other?

I'm struggling with Bootstrap rows and columns in a SharePoint web site. The problem is that I can't and don't want to change the styling that originates from SharePoint, but still be able to use the Bootstrap grid in a part of the page.
I've tried to illustrate the problem without Bootstrap and SharePoint. Here's the JSFiddle:
https://jsfiddle.net/knLjyhe4/
Below is a complete illustration of my example. The problem is that once I use a row to separate element B from C, D and E, the height of side element A affects the first row's height, which I don't want. I want element C to appear immediately below element B. The second example is how it looks before I add the div.row elements.
Below is the HTML and CSS for the isolated example. I had hoped that I could style the div.main element somehow so that the float of A doesn't affect the float of B-E at all. But I can't figure it out.
Please note that I'm sure there are several solutions if I start to change the HTML and styles (like using position), but I really just want to know if there is a way in CSS where the div.main element gets "its own" floating area, without being affected by the A element's float.
<style>
section {
width: 600px;
margin: auto;
}
.block {
float: left;
margin: 10px;
background-color: #339;
color: #fff;
width: 140px;
padding: 10px;
}
.side {
width: 200px;
height: 100px;
}
.main {
margin-left: 240px;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
</style>
<section>
<div class="side block">This is element A in problematic example. I want element C immediately below element B, regardless of the height of this element</div>
<div class="main">
<div class="row">
<div class="block">This is element B</div>
</div>
<div class="row">
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
</div>
</div>
</section>
<section>
<div class="side block">This is element A when it works but without rows</div>
<div class="main">
<div class="block">This is element B</div>
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
<div class="block">This is element F</div>
<div class="block">This is element G</div>
<div class="block">This is element H</div>
<div class="block">This is element I</div>
</div>
</section>
Seems to be working if you change your CSS for .main to this (display: table-row;):
.main {
margin-left: 240px;
display: table-row;
}
Updated JSFiddle here
UPDATE 1
Changed table to table-row since it did not work in IE10.
UPDATE 2
For future reference, the final solution used in SharePoint / O365 looked something like this:
HTML (.container is a bootstrap container)
<div id="DeltaPlaceHolderMain">
<div class="container">
<div class="inner-container">
<!--Your content here-->
</div>
</div>
</div>
CSS
.container .inner-container {
display: inline-block;
width: 100%;
}
The .main needs to be float:left and it needs to have less px to width.
Try defines
.side {width:30%; float:left;}
.main{width:70%; float:left; margin-left:0; }
Don't forget to clean the margin-left of .main
The clear: both property on the row:after pseudoclass is causing your second row to jump down below the left-floated side element.
In bootstrap you should use classname col-md-4 on your side element, classname col-md-8 on your main element, and remove the float: left property from your side element. This will give you 2 columns, one for side which is 4 grids wide and one for main which is 8 grids wide. Your rows should function as you expect once the float is gone.
<style>
section {
width: 600px;
margin: auto;
}
.block {
background-color: #339;
color: #fff;
padding: 10px;
}
</style>
<section class="row">
<div class="block col-md-4">This is element A</div>
<div class="col-md-8">
<div class="row">
<div class="block col-md-6">This is element B</div>
</div>
<div class="row">
<div class="block col-md-6">This is element C</div>
<div class="block col-md-6">This is element D</div>
<div class="block col-md-6">This is element E</div>
</div>
</div>
</section>
In general, with bootstrap you don't want to float things. Also, instead of setting element widths explicitly, it is better to use the .col- classes to fit them into the bootstrap grid system.

How do I remove the space or not have space in between the spans in Bootstrap?

Ok so if you do:
<div class="row-fluid">
<div class="span6"></div><!--span6 END-->
<div class="span6"></div><!--span6 END-->
</div><!--row END-->
picture that as 2 red boxes both taking 50% of the screen.. but every time I do this the span6 has a margin our in between each other and the row above it... How do I make it so that there is no margin above or in between the spans .. I want them to touch above and to the sides.
As you probably don't want to override all .span6 elements, I'd suggest the following:
<div class="row-fluid">
<div class="span6" style="margin: 0px; background-color: red; width: 50%;">foo</div><!--span6 END-->
<div class="span6" style="margin: 0px; background-color: blue; width: 50%;">bar</div><!--span6 END-->
</div><!--row END-->
JSFiddle
EDIT:
As .row-fluid uses width: 100% and .row-fluid .span6 uses width: 48.93617021276595%;, you also need to change width of those divs. See updated code and fiddle.
I would recommend not using grid spans if you don't need grid spans rather than overriding. If you're overriding practically every property of a class, you're better off just using a new class.
.half {
margin: 0;
background-color: red;
width: 50%;
float:left;
}
<div class="row-fluid">
<div class="span12">
<div class="half">First</div>
<div class="half">Second</div>
</div>
</div>
http://jsfiddle.net/cGCHa/4/

CSS float prevents expansion of page

This is a very common scenario, I think.
I'm relatively (no pun intended) new to CSS and am having an issue with float alignment. I have two divs, one which will hold main content to be floated left and the other for navigation, which should be floated right.
Anyway, here is what happens when I don't apply any CSS formatting. This is desired behavior; the page will scroll down as expected:
Desired behavior
Here is what happens when I apply float: left or float: right to the respective elements:
Undesired page overflow
They both overflow past the page. I want it to stretch the page so that it scrolls down if it doesn't fit on one screen area.
A snippet of my HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="main">
<p>Lorem ipsum [...snip...]</p>
</div>
<div id="secondary">
<p>Lorem ipsum [...snip...]</p>
</div>
</div>
<div id="footer">©</div>
</div>
</body>
And the corresponding CSS:
#content {
padding:10px;
padding-top: 110px;
padding-bottom:60px; /* Height of the footer */
}
#main {
padding: 10px;
float: left;
width:70%;
text-align:left;
}
#secondary {
padding: 10px;
float: right;
width:20%;
}
Why is it doing this, and how can I fix it?
Any floating element will increase the height of container div, so a floating element may have 1000 lines of code yet height of its parent element will remain zero unless there is an block element after the floating element..
I've modified your code a bit
<body>
<div id="wrapper" class="clrfx">
<div id="header"></div>
<div id="content">
<div id="main" class="clrfx">
<p>Lorem ipsum [...snip...]</p>
</div>
<div id="secondary" class="clrfx">
<p>Lorem ipsum [...snip...]</p>
</div>
</div>
<div id="footer">©</div>
</div>
</body>
css:
.clrfx:after {
clear: both;
display: block;
content: "";
}
Rule of thumb is, assign class="clrfx" to any Div which has atleast one child element which is floating. Some people use <div class="clear"></div> but this SHOULD NOT be used as clearing is a part of styling and not of markup.
In worst case if you have to use this then I would advise use
<br class="clear" />
because breaking line is close to clearing
Clear the floats and you should be OK.
For example according to your example:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="main">
<p>Lorem ipsum [...snip...]</p>
</div>
<div id="secondary">
<p>Lorem ipsum [...snip...]</p>
</div>
<!-- clear -->
<div style="clear:both;"></div>
</div>
<div id="footer">©</div>
</div>
</body>
Update: for older IE browsers, the clearing div might need a height defined to give it a "hasLayout" property or else it will ignore this div.
http://www.satzansatz.de/cssd/onhavinglayout.html
Generally, people make a class definition that has all this info so you only need to type <div class="clear"></div>
Here's an example of robust clearing CSS from http://sonspring.com/journal/clearing-floats
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
There are alternative methods to clear floats in the parent div and removing the extra, structural <div> tag but I personally don't feel a need to investigate if they are bullet-proof if this solution definitely is.
As you said that you were new to CSS: Floated elements have no height. Therefore #content is defaulting to minimum height, which is the combined height of the paddings.
Adding <div style="clear:both;"></div> after div#secondary will force it to below the floated elements. As this div does have a height, it causes #main to behave as expected. See Yuji's answer for sample code.
Floating elements are removed from the flow, so they are not taken into consideration when their parent element's height is being calculated and their parent element is set to overflow: visible.
You can either place a dummy element beneath the floated elements (forcing the dummy element to the correct place with the clear property), or you can set the parent element to something other than overflow: visible.
To make your wrapper contain all floated elements, simply set;
#wrapper {overflow: hidden;}
Simple, and you're done. No extra markup.

How to link two css properties together?

I have one div that has a dynamic height and another div that is a float. Is there a way in css I can link div2's height with the height of div1?
I think it's that you want : http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
It's possible that you can wrap both divs in a 3rd div(wrapper) and then set the height of div2 to 100%
<div class="wrapper">
<div class="div1">
</div>
<div class="div2">
</div>
<div style="clear: right"></div>
</div>
.div2 { float: right; height: 100% }

CSS positioning

I have some HTML codes like
<div id="top" style="height: 50px"></div>
<div id="bottom" style="height: 50px"></div>
<div id="content">Here goes some text</div>
I want the middle div (#bottom) to be positioned on top of the div (#top) and while doing so, the #content div should automatically move up by 50px.
If i code like
<div id="bottom" style="height: 50px; position: relative; top: -50px;"></div>
the #bottom div do moves up but the #content div stays behind.. leaving a 50px gap between.
So how should I position it??
If I'm understanding correctly, you want to take #bottom and remove it from the regular page flow, placing it over-top-of #top.
Two ways to take an element out of the regular page flow are position:float; and position:absolute;
Not knowing what the rest of your page looks like I suggest something like:
<div id='container' style='position:relative'>
<div id="top" style="height: 50px"></div>
<div id="bottom" style="height: 50px; position:absolute; top:0em; left:0em;"></div>
<div id="content">Here goes some text</div>
</div>
That will put #bottom in the top, left-hand corner of #container, which is also where #top will be. #container being part of the regular page flow will be right below #top.
For centering an absolutely positioned element you can do like this:
<div style="display:table; margin: 0 auto;"> <!-- display:table; to 'shrink-wrap' the div - margin: 0 auto; to center it->
<div style="position: relative; float:left;"> <!-- float also shrink-wraps -->
<div id='top'>top div content</div>
<div id='bottom' style="position:absolute; top:0em; width:100%; text-align:center;"> content of bottom div </div>
<div id='content'></div>
</div>
</div>

Resources