Div Floats and Clears : Multiple Elements - html

I Need the right Column elements to be flush with the javascript back button image. Not sure what the deal is, I have tried clear left, clear right, and clear both.
Live Example:
http://newsite.702wedding.com/las-vegas-marriage.asp
Any Help Would be Great.

Change the code which looks like this:
<div class="package-back-button1"></div>
<div class="clearfloat-left"></div>
<div class="win-this-package1"></div>
into this:
<div style="float: left">
<div class="package-back-button1"></div>
<div class="win-this-package1"></div>
</div>
So, remove the .clearfloat-left div, and enclose the two items inside a div with float: left.
A kinda yucky (but easy) fix is to do this:
On .package-right-box1, add margin-top: -89px.
Tested in Firefox, IE7/8.

Here is a solution on jsfiddle. Code is below.
<!--Left Column Boxes-->
<div style="width:50%; float:left">
<div style="background-color:#f00; width:100%">left1</div>
<div style="background-color:#0f0; width:100%;">left2</div>
<div style="background-color:#00f; width:100%;">left3</div>
</div>
<!--Right Column Boxes-->
<div style="float:right; width:50%">
<div style="background-color:#aaa; width:100%;">right1<br />
<div style="background-color:#ff0; width:100%;">right2</div>
</div>
<div style="background-color:#0ff; width:100%;">right3</div>
</div>
Also, be aware that your second div on the right was nested within the top-right div. I'm not sure that was intended, but am just pointing it out.

Related

Elements not lining up until after turning CSS rule off and on again

I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>​
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.

CSS Stacked divs

I have some divs which are all floating left, If you see the attached jsfiddle you will see what im trying to do, in the fiddle there is a yellow box, I need this to be flush with the bottom of the green box only im not sure if this is even possible?
Is it? and if so how may I do this? Thanks in advance!
http://jsfiddle.net/K5zjc/
Try something like this jsFiddle. Techincally, you float even .box items to the right instead of left and then you are getting self-filling columns in accordance to their content. So, in your CSS you add:
.box:nth-child(odd) {clear: left}
.box:nth-child(even) {float: right; clear: right}
UPDATE
Apparently this solution doesn't work nice if you have more than these specific blocks. So, probably, jQuery Masonry is the only way for you to get the good result.
You must add two divs with float: left that act as columns.
See: http://jsfiddle.net/K5zjc/5/
<div style="width:200px;">
<div class="boxContainer">
<div class="box green">
<ul><li>Item</li></ul>
</div>
<div class="box yellow">
<ul><li>Item</li><li>Item</li></ul>
</div>
</div>
<div class="boxContainer">
<div class="box red">
<ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul>
</div>
<div class="box cyan">
<ul><li>Item</li><li>Item</li></ul>
</div>
</div>
</div>

Is there a disadvantage of using `display:table-cell`on divs?

What I am trying to accomplish is having a fixed-width first div and a fluid second div which will fill up the rest width of the parent div's width.
<div class='clearfix'>
<div style='float:left; width:100px;'>some content</div>
<div style='float:left'>some more content</div>
</div>
and on this one everything seems alright and fluid.
<div style='display:table'>
<div style='display:table-cell; width:100px;'>some content</div>
<div style='display:table-cell'>some more content</div>
</div>
I want to go ahead with the second one but i feel like the second example will give me headaches in the future.
Could you offer some suggestions or insights?
display: table-cell is perfectly fine to use, with just one downside..
It doesn't work in IE7 (or IE6, but who cares?): http://caniuse.com/#search=css-table
If you don't need to support IE7, then feel free to use it.
IE7 still has some usage, but you should check your Analytics, and then make a decision.
To answer your specific use case, you can do it without display: table-cell, provided that you don't need the height to adjust based on content:
http://jsfiddle.net/g6yB4/
<div class='clearfix'>
<div style='float:left; width:100px; background:red'>some content</div>
<div style='overflow:hidden; background:#ccc'>some more content</div>
</div>
(why overflow: hidden? With: http://jsfiddle.net/g6yB4/3/ vs without: http://jsfiddle.net/g6yB4/4/)
You could do something like this. It puts your main content first. You can use a vertically repeating css background image on your main "content" container to create the illusion of a background running all the way down the left column.
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
</div>
To extend to a 3-column with fluid center:
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px; margin-right:100px;">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
<div id="rightnav" style="float:left; width:100px; margin-left:-100px;">
Right content here
</div>
</div>
To get the first example working, you should also float the containing div, this will make sure that both of the elements within sit as you would expect within it. Not really sure what you mean by 'is a pain', though?
One down side of using table-row (very related to the OP) is that you can't use margin/padding on a row.

Basic CSS question

In CSS, how do I achieve the following layout?
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xR2.1x xxxxxxxxxR2.1xxxxxx
xR2.1x xxxxxxxxxR2.2xxxxxx
xR2.1x xxxxxxxxxR2.2xxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
R2.1 is an image that I want to go to the left, and R2.2 is a div that I want to go to the right.
If R2.2 was a paragraph, it would be easy - I could just use float:left on R2.1 - but the fact that it is a div seems to mess things up.
I've tried using <img style="float:left;"> and <div style="float:right">, together and separately, but they don't seem to combine well.
What am I doing wrong?
There is no need to use float:right on the right side, just use float:left and margin:
<div>r1</div>
<img style="float:left; width:50px; height:50px;" title="r2.1" />
<div style="margin-left:50px;">r2.2</div>
<div style="clear:both;">r3</div>​
Is there any reason you can't put the image inside the second div? That would sort it out:
<div id="r1" style="height:100px; background-color:#eff;">r1r1r1r1r1r1r1r1r1r1</div>
<div id="r2" style="height:100px; background-color:#efe;">r2r2r2r2r2r2r2r2r2r2
<div id="image" style="width:160px;height:100px;background-color:#ff8;float:left">
</div>
</div>
<div id="r3" style="height:100px; background-color:#fee;">r3r3r3r3r3r3r3r3r3r3</div>
http://jsfiddle.net/WP6bc/1/
Try:
<div style="margin-left: [width of picture]">
The floats should work as expected. Make sure you add a clear:both to the R3 div, so it knows it should start beneath the floating divs, and that the left/right divs have the correct widths so they aren't pushed to a new line. Example:
<div>r1</div>
<img style="float:left;" alt="r2.1" />
<div style="float:right;">r2.2</div>
<div style="clear:both;">r3</div>​​​​​​​​​​​​​​​​
http://jsfiddle.net/wHm8n/

html float problem

I have the following code:
<div "background-color:green">
<div "float:left">something</div>
<div "float:right:>something else</div>
<div>
Why does the background color not appear in this case? What needs to be done to make it appear
{Code simplified for understanding , may not be in the approporiate syntax}
You need to clear the div. You can use clear: both on an element beneath, but I often find this is easier:
<div style="background-color:green; overflow: hidden;">
<div style="float:left;">something</div>
<div style="float:right;">something else</div>
<div>
Notice the overflow: hidden.
Of course, it only works where you don't require elements to leave their containing elements.
A floated object is "lifted" from its containter. The bottom edge of the outer div doesn't stretch to its content anymore.
An option is to add an element with clear (clear takes a direction (either left, right, or both), and pushes itself below a float it would touch:
<div style="background-color: green">
<div style="float: left">something</div>
<div style="float: right">something else</div>
<br style="clear: both;" />
<div>
You need to write in the style attribute
<div style="background-color:green;">
<div style="float:left;">something</div>
<div style="float:right;">something else</div>
<div>