The HTML code below consistently results in TEXT A and TEXTB not being horizontally aligned but removing <div style="display:none;"> </div> fixes the alignment. I discovered that using div elements instead of p elements fixing this issue, but am wondering what is actually going on. I saw this behavior in in Opera, Firefox, IE (IE actually puts TEXTB on a separate line), and Chrome.
My expectation was that a div with display:none would not have any impact on formatting.
<html>
<body>
<div style="border-top-style: solid;">
<p style="float:left; width:280px;">
TEXT A<div style="display:none;"> </div>
</p>
<p style="float:left;">
TEXTB
</p>
</div>
</body>
</html>
div is not a valid child of p, so the browser applies error correction to the HTML to end up with this:
<div style="border-top-style: solid;">
<p style="float:left; width:280px;">
TEXT A</p><div style="display:none;"> </div>
<p></p>
<p style="float:left;">
TEXTB
</p>
</div>
(HTML taken from Chrome's Inspector)
Note the extra p element.
First off, you can't put a 'div' inside a 'p'. So use a 'span' instead and see what happens
Related
I have the following HTML and CSS code which I've taken from a WordPress theme.
<div class="ws-contact-info">
<div class="col-sm-4">
<h2 style="text-align: center;">Phone:</h2>
<p style="text-align: center;">(098) 765-4321</p>
</div>
</div>
On a webpage it presents as follows
Phone:
(098) 765-4321
How can I write my CSS to make the elements fit into one row, like this:
Phone: (098) 765-4321
Apply display: inline-block to the <h2> and <p> elements, as they are both block elements, so they are taking up the whole width, causing the line break.
Alternatively, you could apply float: left to both of them.
I feel really silly having to ask this, but I haven't been able to find much info and I am having a strange issue. Basically, I have the following html:
<div class='one'>
<div class='two'>
<img src="someImage" class="img-responsive teamPhoto"/>
<p>Some text</p>
<p>Some text
</div>
</div>
Simple enough. The issue that I am having is that when I look at the height of div one and two, the height is only equal to the nested image in div two.
It does not include the 'P' elements at all, and when I inspect in the browser I can see that both div's only extend as far as the bottom of the image.
What am I missing here that my paragraph elements are being excluded from the div height?
I don't see your css but I am pretty sure that there's something wrong with styles of 'one' and 'two' div. If you inspect the two div element in Chrome dev tool, try to disable all styles for the two div element and it should work.
<div class='one'>
<div class="two" style="position: absolute;background-color: #ccc;">
<div>
<img src="https://fyf.tac-cdn.net/images/products/large/TEV12-4.jpg" class="img-responsive teamPhoto">
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
I'd put the image and p tag inside another div to solve your issue. The div one still has height = 0 though
<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?
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">
<div style="background-color:black">
<div style="float:right">
Test message
</div>
<div>
This will show 'Test message' with white background because the parent div didn't fit the content.
How can make the div fit to the content? (without using table, or display:table since it's not supported in IE)
You can also do this:
<div style="background-color:black; overflow: auto;">
<div style="float:right">
Test message
</div>
<div>
It's a cleaner way to do the clearfix :)
A common solution is to put a <br style="clear: both;"> after the floating element to clear the float and cause the parent element to wrap the elements.
<div style="background-color:black">
<div style="float:right">
Test message
</div>
<br style="clear: both;">
<div>
Apart from the problem, I'd suggest to put the styles in a separate CSS file, if not realised yet.
Sounds like this is the old clearfix issue. This is almost a total necessity when using css and floats for layouts. See http://www.webtoolkit.info/css-clearfix.html for a brief description and fix. Or for a more in depth look, see here http://www.positioniseverything.net/easyclearing.html