<html>
<head>
<style type="text/css">
div, p {border: 1px dashed;}
</style>
</head>
<body>
<!-- Why must the text that's intended to be right-justified *PRECEED*
the text that is to be left-justified? It "feels" like the syntax should
simply read from top to bottom:
<div>
"Put some text here"
"Then put some text here, but align it right"
</div>
Instead, this seems to work:
<div>
"The right-justified text has to go first"
"Then we code the 'normal' left-justified text"
</div>
I see how to 'make it work', but I'm curious as to the logic behind this
seemingly 'backwards' syntax. What am I misunderstanding?
-->
<div>
<!-- Does NOT work as intended -->
<div>
<p>I am on the Left</p>
</div>
<div style="float: right;">
<p>I am on the RIGHT, but I don't align</p>
</div>
<br />
<br />
<br />
<!-- Works as intended -->
<div style="float: right;">
<p >I am on the RIGHT, and I mostly align</p>
</div>
<div>
<p class="">I am on the Left</p>
</div>
</div>
</body>
</html>
It's difficult to follow your question because you mix the words justify and float. Text can be justified right or left, divs cannot. They can only be floated.
That aside, the answer to your question has to do with document flow. I think what you're expecting is that you put the right-floating div after the normal-floating div and they end up side by side. That is, you expect the right-floating div to "know" that you want it to be side-by-side with the div just above it in the document flow.
But why should it know that?
Perhaps you mean it to be side by side with a div further up the flow, or further down. As you can see, it's kind of arbitrary. And what would happen if there was no div above it to float next to?
Instead, the people who put together CSS decided that the div would float horizontally from where-ever it appeared in the document float, stepping out of the flow at that point. So, by putting the right-floating div above the normal div, you're telling it to float right from that point in the document, and everything else "moves up".
Did that help?
Related
I want to create a floating box on the right and put a picture inside it.
And I want to paragraph to be on the left of it and - when it's long enough - below the picture too. And additionally to this I want to put another floating box with a picture inside on the left side a bit more downside. And let the text inside the paragraph also go around it.
So first I managed to do now I created the first part with a floating box on the rigt and text around. But how can I put another picture below in a floating box on the left now and address it separately in CSS?
HTML:
<body>
<div class="picture">
<h1>this is the first heading</h1>
<p><img src="Images/car.jpg" alt="car">sample
<img src="Images/car2.jpg" alt="car2">
</p>
</div>
</body>
CSS:
div.picture img {
float: right;
width: 300px;
height: 200px;
}
I think your issue is that the <p> tag is a block-level element, so your floating <div> is sitting below it. If you style your paragraph to be inline-block, for example, you should get what you're looking for.
But you should be able to just put your img directly in your paragraph, and float it to the right, and then the paragraph should flow around the image as necessary.
I'm looking to create a style I can reuse that will create the following layout.
Place an image and float it left, then have text with or without paragraph tags that are positioned to the right of said image. The text will be aligned to the top of the image on the left.
I can achieve everything except the text isn't positioned at the top. Here is what I have so far, the text being centered and not top aligned.
<div style="overflow:auto">
<div style="float:left">
<img src="Images/img.jpg" />
</div>
<div>
<p>this is some text that is getting centered along the img height</p>
<p>Some more text... </p>
</div>
</div>
example of what this does. I need the 3 paragraphs aligned to top of image and 4th how it is already.
example http://www.spokanewastewater.org/Images/untitled.jpg
I would do 2 things for this.
On your first paragraph tag, add the styles below. This will remove the spacing that is caused by the first paragraph tag.
<p style="margin-top:0;padding-top:0"></p>
And on the image, the style below. Sometimes if you don't set a vertical align the image will be off a little. But I would need to see a JSFiddle to see how yours is rendering.
<img style="vertical-align:top">
Also, I should add that this should be done with an external CSS sheet and not inline, if possible.
I'm trying to use CSS to create callouts in a block of text (for things like block quotes or relevant pictures). It has to be manipulable with Javascript and work with CMSs, so I can't just embed the callout in the middle of the text block and float it. Instead, the callouts are located at the top of the text block and I use a pusher div of a certain height to move it down to the desired location.
This technique works perfectly when all of the callouts are on the same side of the text block. The problem is when I want a callout on each side. The first pusher div pushes the second pusher div down, even though they are floated to different sides and both have a very small set width.
Here is an example of the problem. The pusher divs (normally 0px thick and transparent) are the red bars on the side. Both of them should start at the top of the block, just under the header. As you can see (at least if you're using Webkite/Gecko, I haven't tried anything else), the bar on the right starts underneath the bar on the left.
http://keaton.ws/Files/theCalloutProblem.html
I've tried playing around with the structure of the HTML (Taking the pusher and callout out of their parent div) and changing the display property of almost everything, and nothing has worked. Most of the changes I make result in the text not wrapping properly. I know this is a rather obscure problem, but any help would be greatly appreciated.
-Keaton
Here's the code, with styles inline:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="width:750px; margin:0 auto;">
<div style="width:750px;text-align:center;"><h1>This is the header</h1></div>
<!-- Left Callout -->
<div>
<div style="width:0px;float:left;height:100px;"></div>
<div style="width:200px;float:left;clear:left;"><!-- Callout Text --></div>
</div>
<!-- Right Callout -->
<div>
<div style="width:0px;float:right;height:250px;"></div>
<div style="width:200px;float:right;clear:right;"><!-- Callout Text --></div>
</div>
<div style="width:700px; margin: 0 auto;">
<!-- Body Text -->
</div>
</div>
</body>
</html>
In these examples, the alternating left/right floats always have the same height.
http://meyerweb.com/eric/css/edge/slantastic/holiday.html
http://meyerweb.com/eric/css/edge/slantastic/demo2.html (<--why is this link unclickable?)
http://csstextwrap.com/#export
It seems that you have to sort the floats by height/position to achieve the desired effect:
http://jsfiddle.net/ge5YG/2/
On a web page, I have two divs. I would like to place the second div just right to the other one so that they're in a line.
You can use the float CSS style. Set it to left for the first div. The second div will be placed just right of it (so long as there is enough space)
<div>
<div style="float: left">
<p> This div will be on the left</p>
</div>
<div >
<p> This div will be on the right</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>
Note, that sometimes it may be necessary to give the floating divs a fixed width in order to achieve the proper horizontal layout.
<div>
<div style="width: 100px; float: left">
<p> 100px div will be on the left</p>
</div>
<div style="width: 200px">
<p> 200px div will be on the right as long as there is enough
horizontal space in the container div
</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"><!-- usually leave this empty --></div>
</div>
You can also float:right; in order to make the divs align on the right side of the page. The clear is VERY IMPORTANT. In IE a lot of the time the float left/right rule is propagated to other elements to elements you did NOT intend to float. Usually though; you don't pick up on this right away and it becomes a nightmare to figure out why your page looks like crap down the road. So just make a habit of putting an empty clear div as the last sibling of any divs you decide to float.
Most simple way is CSS float:
<div id="div1">hello</div>
<div id="div2">world</div>
And the CSS:
#div1 {float: left;}
#div2 {float: left; margin-left: 10px;}
Simple test case.
After the floating divs add another one to clear the float so that further contents will be displayed fine:
<div style="clear: both;"></div>
float is a quick way, inline-block is another quick way and has some advantages over float such as not needing a clear:both element.
here's an example with both methods http://jsfiddle.net/dGKHp/
HTML:
<div id="floatExample">
<div>Float Left</div>
<div>Float Right</div>
<br />
</div>
<div id="inlineBlockExample">
<div>Left</div><div>Right</div>
</div>
CSS:
#container {width:600px;margin:0 auto;}
#floatExample div {float:left;background-color:#f00;width:50%;}
#floatExample br {clear:both;}
#inlineBlockExample div {display:inline-block;width:50%;background-color:#ff0;}
This is a pretty good write-up on ins and outs of inline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I am having an issues getting my HTML to format the way i need it too.
I am creating div dynamically (parent). In each div there are two divs inside (div one & two).
Div one is text that can be any length or variable length. Div two contains an image.
Regardless of the size of the parent div, the text needs to fill as much width as possible. But i need the 2nd div with the image, to float above the text right at the end of the line. I also need all the image divs, to vertically line up.
This parent div is re-sizable and can get either smaller of bigger but the floating image must always be sitting in the sentence line but on the right of the container.
If the text is wider than the div parent, the image needs to float against right hand side of the parent container on the same line as the text. If the text is smaller than the parent the image must still be on the right hand side of the parent div.
Think of it as a floating image full stop, if that makes sense. where every sentence has its full stop in one long vertical line.
I have tried both divs and tables but am getting garbled results.
Here is my current code:
<div>
<div style="display: inline; float: left;">
Text Goes here</div>
<div style="display: inline; float: right; z-index: 1000;">
<img src="info.png" /></div>
</div>
<div>
<div style="display: inline; float: left;">
Next line of Text Goes here</div>
<div style="display: inline; float: right; z-index: 1000;">
<img src="info.png" /></div>
</div>
Thanks
I think it's a bit hard to visualize what result you're trying to get. Can you draw a diagram that illustrates your desired results?
As best I can tell, you're looking for this (view results at JSFiddle): http://jsfiddle.net/kcschaefer/GYQea/9/
Code is:
<div id="parent" style="width: 100%;">
<div>
First text goes here
<img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />
<div>
<div style="clear: both;"></div>
<div>
Next line of really long text that demonstrates how the float will work would go right here, and you can see that the info thingie goes all the way to the end of the div, no matter how long this is.
<img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />
<div>
</div><!-- end parent -->