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/
Related
Following is the js fiddle
http://jsfiddle.net/zk7Uf/1/
<div style="width:200px">
<span class="span-blankPDF">
<label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving:</label>
</span>
<div class="div-PDF" style="display: inline;width: 50px;">Reason to livelong</div>
</div>
The result i want is like this with the above divs width should not be increased.
Reason for leaving:Reason
to livelong
I think this is what you are looking for :
http://jsfiddle.net/BY294/
<div style="width:200px">
<span class="span-blankPDF" style="float:left">
<label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving :</label></span>
<div class="div-PDF" style="display: block;width: 50px; float:left">Reason to livelong</div>
</div>
Position them baby!
You want the span to float left so it has a point of reference, then you want the next div to be a block as its its own entity as such and float that left to 'lean' on the span you have..
Or else i have completely misunderstood the question, in which case im not to blame! :)
Assuming your span element should remain a span and the div inside should remain a div, you can do it nicely with some CSS.
Use the display: inline-block to get rid of how span and div position themselves by default. Then use vertical-align: top to make the elements in the same line align on top of their containers.
So, without changing the widths (as you requested) and just adding some CSS, you can write it like this:
<div style="width:200px;">
<span class="span-blankPDF" style="display:inline-block;vertical-align:top;">
<label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving</label>
</span>
<div class="div-PDF" style="display:inline-block;width:50px;vertical-align:top;">Reason to livelong</div>
</div>
Se live demo here: http://jsfiddle.net/Vg6RG/
EDIT: You get the same result sa Pogrindis suggested, but this one is not using floating.
I try to have a few hours own layout, but I still have a problem. I would like make: http://img191.imageshack.us/img191/1243/schemal.png
I would like that the body was flexible. Max width page 900px. I can't cope with float and clear.
Live example: http://jsfiddle.net/eTEz2/
Thanks for help!
After rearranging the HTML slightly (moving all of the sidebar items to line up with one another - oneleft, oneright, twoleft etc...), I've recreated that effect, assuming you want the body to contain the floated items, and spill out below, with this jsfiddle.
If that's not the effect you wanted, I would suggest you rearrange your HTML to have three columns, like below:
<div class="column-left"></div>
<div class="column"></div>
<div class="column-right"></div>
And within these divs, you can have whatever elements you want, and you would only need to float the left and right columns here.
Try to chop it up into different partitions first: header, footer, 2 sides and 1 content. The sides consist of 3 elements again (probably divs in your case).
<div ></div> //top bar
<div id="left column" style="width:100px;float:left;">
<div style="float:left; width:100px;">//left boxes
<div style="float:left; width:100px;">
<div style="float:left; width:100px;">
<div style="float:left; width:100px;">
</div>
<div id="center column" style="float:left; width:500px;">
<div style="float:left; width:490px;"> //center box
</div>
<div id="rightcolumn" style="float:left; width:100px;">
<div style="float:left; width:100px;">//right boxes
<div style="float:left; width:100px;">
<div style="float:left; width:100px;">
<div style="float:left; width:100px;">
</div>
you can also use the css property height:190px; to set various heights. hope this helps you out.
I've got problem with paragraph on my website: naprawiamy.za.pl. As u can see there is a big white space in the text. What's that and how it got there? Could somebody tell me?
This happen because the above div contains img that have float:left. So there is need to clear the float. Add overflow:hidden for the div with img tags and will fix the text below.
Your code is written as:
<div id="main">
<div>
<img src="lol.png" id="logo" alt="logo serwisu">
//more images
</div>
<div id="story" >
Your Text
</div>
</div>
Set the CSS Property float:left for
1. <div style="float:left">
2. <div id="story" style="float:left">
I have the following HTML:
<div >
<div >
<div style="float: left;">
<input type="checkbox" value="False" />
</div>
<div style="float: left;" > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</div>
It displays the XXX to the right of the checkbox. However, if I reduce the screen width, the XXX goes under the checkbox.
Is there any way that I can "lock" the XXX text inside the DIV so the XXXX always appears to the right and on the same line?
(Note that I want to keep using DIV as later on I do some jQuery things with the DIVs.)
If you want them to always be on the same line, you can reasonably combine the two divs into one, still floated, and use the white-space property to keep it on one line:
<div>
<div>
<div style="float:left; white-space:nowrap;">
<input type="checkbox" value="false" /> XXXXXXXXXXXXXXXXXXXXXXX
</div>
</div>
</div>
Starx's answer explains very well why it's not really feasible to do this with two separate floated divs.
edit: http://jsfiddle.net/nkorth/qQSCV/
yep, you can do that by setting fixed width for the container, like so:
<div>
<div style="width:400px">
<div style="float: left;">
<input type="checkbox" value="False" />
</div>
<div style="float: left;" > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</div>
That is what float:left is supposed to do. It will remain in the left side as much as possible. If the element before is also floated to the left side, it will try to float to left, together with it, if the space is available. That's why when you resize your screen and there is not enought space for the div to float to the together with previous element, it will float to the left, down the previous element.
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.