If I have the following HTML. Why does the content of the li drop down a line?
I am looking for an explanation of the behaviour and how to fix
<html>
<body>
<div>
<ol>
<li>
<div>
<div style='width:65%;float:left;'>
Left Text
</div>
<div style="width:35%;float:left;font-style: italic;">
Right Text
</div>
<div style='clear:both;'></div>
</div>
</li>
</ol>
</div>
</body>
</html>
<html>
<body>
<div>
<ol>
<li>
<table>
<tbody>
<tr><td>left</td><td>right</td></tr>
</tbody>
</table>
</li>
</ol>
</div>
</body>
</html>
The DIV's are set as display: block by default, therefore it does not stay in the same line as the LI..
If you set it as display: inline; it will force it to stay in the same line
<html>
<body>
<div>
<ol>
<li>
<div style="display: inline;">
<div style='width:65%;float:left;'>
Left Text
</div>
<div style="width:35%;float:left;font-style: italic;">
Right Text
</div>
<div style='clear:both;'></div>
</div>
</li>
</ol>
</div>
</body>
</html>
Edit:
as Billy said there is an issue with the floats, but changing them to inline-block adds another issue, the margin look at this explanation
Adding a SPAN instead of a div won't solve the issue, because the difference is that the SPAN is display: inline; by default, (the same as we have now with the DIV)
<html>
<body>
<div>
<ol>
<li>
<div style="display: inline;">
<div style="width:65%;display: inline-block;margin-right: -2px;">Left Text</div>
<div style="width:35%;display: inline-block;font-style: italic;margin-left: -2px;">Right Text</div>
</div>
</li>
</ol>
</div>
</body>
</html>
Related
When I use the <center> tag along with the <ul> tag in my html code, The bullet points are staying on the left while the text is appearing in the center. How do I fix this?
here is the problematic code:
<center>
<h2>future projects</h2>
<div>
<ul>
<li>Weird dreams</li>
</ul>
</div>
</center>
I've tried everything I can think of, but none of it has worked.
UPDATE:
<center> is Deprecated in HTML4 onwards. So, it can be replaced using CSS as:
<div style="text-align:center">
<h2>future projects</h2>
<div>
<ul style="list-style-position: inside;">
<li>Weird dreams</li>
</ul>
</div>
</div>
Use list-style-position to center the unordered list bullets.
<center>
<h2>future projects</h2>
<div>
<ul style="list-style-position: inside;">
<li>Weird dreams</li>
</ul>
</div>
</center>
set style as list-style-position: inside; for "ul"
The center tag is deprecated.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
Use style-sheet instead...
Like here :
#center{
text-align: center;
}
#center ul{
margin:0px;
padding:0px;
}
<div id="center">
<h2>future projects</h2>
<div>
<ul>
<li>Parrot</li>
<li>stiff</li>
<li>Pining for the flords</li>
<li>resting</li>
</ul>
</div>
</div>
I want to align image in front of text and in the middle .
<div id="info">
<ul>
<h3>
<li>NAME: Mohit Kumar Singh</li>
<li>CONTACT:1234567890</li>
<li>ADDERESS:police line</li>
</h3>
</ul>
</div>
<div id="over" style="width:100%; height:100%" align="center">
<img src="mks.jpg" height="150" width=120" >
</div>
If you mean you want the image and the text to be displayed on the same link, then this should work:
I added a container div around both divs and then displayed them inline-block (inline to be on the same line, block so that the image can have a width).
However, for this to work, your style for id="over" was removed.
#container {
text-align: center;
}
#container div {
display: inline-block;
}
<div id="container">
<div id="info">
<h3>
<ul>
<li>NAME: Mohit Kumar Singh</li>
<li>CONTACT:1234567890</li>
<li>ADDERESS:police line</li>
</ul>
</h3>
</div>
<div id="over">
<img src="mks.jpg" height="150" width="120">
</div>
</div>
I am designing a website for software created by my self. For this, I need a layout in which three boxes are on the same horizontal position. But as I put text in those they start shifting.
What might be the possible cause?
<body class="metro">
<nav class="navigation-bar">
<nav class="navigation-bar-content">
<div class="element">My Software Name</div>
<span class="element-divider"></span>
<a class="element place-right" href="#">Download</a>
</nav>
</nav>
<div class="slideImage"></div>
<div class="about">
<div class="infoBar">
<h2>What is ?</h2>
<span class="paragraph">
this is example text to illustrate the real problem regardig the info bar alingment
</span>
</div>
<div class="infoBar"><h2>Why this ?</h2>
<span class="paragraph">
</span>
</div>
<div class="infoBar"><h2>About</h2></div>
</div>
</body>
Here is full Scree Example
You could do it by set the vertical-align:top; to .infoBar to remove the vertical whitespace between inline-block elements.
JSFiddle - DEMO
CSS:
.infoBar {
vertical-align:top;
}
I'm having a problem with css.
When my image becomes smaller than the list next to it, the grey bar at the bottom of the picture (.meter) won't stick anymore to the picture. I don't know how to solve this. I think it's the opposite of clear that I need, But I couldn't find it on the internet
here is the jsFiddle:
http://jsfiddle.net/RnSq7/
<img src="http://images7.alphacoders.com/407/407975.jpg" />
<section>
<p>
<ul>
<li>long list</li>
<ul>
</p>
</section>
<div class="meter"><span style="width: 50%"> </span></div>
I hope sombeody can help me, thanks in advance.
Just change the order in your markup :
FIDDLE
<img src="http://images7.alphacoders.com/407/407975.jpg" />
<div class="meter"><span style="width: 50%"> </span>
</div>
<section>
<p>
<ul>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
...
</ul>
</p>
</section>
I didn't mention but you are missing the / sign on your closing ul tag in your fiddle. I corrected that typo in the demo too.
Simplest way is to take the div and put it just after the img. But if your div will not house any other element, I would suggest to take it off and use 'border-bottom' property.
Option 1:
<img src="" />
<div class="meter"><span style="width: 50%"> </span>
</div>
<section>
<p>
<ul>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
</ul>
<p>
</section>
Options 2:
<img src="" class="test"/>
and then in stylesheet
.test {
border-bottom: 20px solid black;
}
I cant get these two pieces of content to display next to each other. I never had any problems with displaying content this way before so would appreciate any help available
HTML
<div class="block-one">
<h3>Block 1</h3>
<ol>
<li>One</li>
</ol>
</div>
<div class="clear-div"></div>
<div class="block-two">
<div class="block-two-title">Block 2</div>
<div class="thumb-title">
<img src="images/example.jpg" width=155 height=130 />
<h4>Title</h4>
<p>Description</p>
</div>
<div class="thumb-title">
<img src="images/example.jpg"width=155 height=130 />
<h4>Title</h4>
<p>Description</p>
</div>
<div class="thumb-title">
<img src="images/example.jpg"width=155 height=130 />
<h4>Title</h4>
<p>Description</p>
</div>
CSS
.popular-games { float:left }
.latest-screenshots img{ display:inline-block}
.thumb-title{display: inline-block}`
Here is your fiddle. You cannot get those two blocks to display next to each other because you have a clearing div between them. If you remove it and float both blocks, you will get the desired result, like here
<div class="block-one">
<h3>Block 1</h3>
<ol>
<li>One</li>
</ol>
</div>
<!-- remove this one <div class="clear-div"></div> -->
<div class="block-two">
[…]
Just add these CSS rules:
html, body { height: 100%; }
body > div {
float: left;
}
Here is the Jsfiddle: DEMO