I have a div whose height span 2 rows. But I want to the following div fit into the bottom left and bottom right corner:
http://jsfiddle.net/netnet/NNH6V/
before browse, please drag the splitter to left and you will see the checkbox2 and "2222222222" could be fit into bottom left and bottom right perfectly.
I can use the relative position(.VerticalUp class). But the problem is it will leave a empty row underneath, which I don't want.
Any idea?
If you are trying to float the Hematology div, you have two of them that are causing conflict. If you change .Hematology { float: right; }, this will make the Prenatal content float right...making everything fit...
try float with position.
ps-i'm new here. don't have much experience. :)
Hey now change to your code as like this because your code is difficult i have created new code please check it. and implement your projects according design
Css Code
.top, .bottom{
list-style:none;
color:#fff;
}
.top li, .bottom li{
display:inline-block;
background:green;
width:33%;
vertical-align: top;
border-top:solid 10px red;
}
p{
display:inline-block;
vertical-align: top;
}
.bottom {
position:absolute;
left:0;
right:0;
bottom:0;
}
.bottom li:last-child{
float:right;
}
HTML code
<ul class="top">
<li>
<input type="checkbox">
<p>first Check box</p>
</li>
<li>
<input type="checkbox">
<p>Second Check box</p>
</li>
<li>
<p>finel box</p>
</li>
</ul>
<ul class="bottom">
<li>
<input type="checkbox">
<p>first Check box</p>
</li>
<li>
<p>finel box</p>
</li>
</ul>
Live demo http://jsfiddle.net/fAkY5/
Related
This has probably been posted before, but I couldn't find a solution from searching. I'm new to HTML and CSS just started ~1 week ago, so if there is a solution an explanation would go a long way rather than modified code/solution.
So I am attempting to split a div into essentially two columns one of 25% width and the other 75% width. I haven't started doing the CSS yet hence why the styling is inline at the moment. The general div of 100% width displays fine now when I try to split this into two inner div's it seems to work the list i am trying to create displays correctly however the next column of 75% appears below the div. Why is this and is there anyway to fix it.
<div style="width:100%;background:orange">
<div style = "text-align:center;width:25%;background-color:red;">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div style="width:75%;background:purple;">
dsfsdf
</div>
</div>
To make <div>s align next to each other they need to float.
CSS:
.container {
background-color: orange;
width:100%;
}
.leftColumn {
float:left;
background-color: red;
width:25%;
margin:0;
}
.rightColumn {
float:right;
background-color: purple;
width:75%;
margin:0;
}
.clear {
clear:both;
}
HTML:
<div class="container">
<div class="leftColumn">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div class="rightColumn">
dsfsdf
</div>
<div class="clear"></div>
</div>
<div>Next content</div>
To continue with your code below you need an element that clears the floating.
Fiddle: http://jsfiddle.net/o7pd2fLf/2/
Create like this your html and css:
.orange-div{
width:100%;
background:orange;
float: left;
}
.red-div{
text-align:center;
width:25%;
background-color:red;
float: left;
}
.purple-div{
width:75%;
background:purple;
}
<div class="orange-div">
<div class="red-div">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div class="purple-div">
dsfsdf
</div>
</div>
add style float:left to both the div with width 25% and 75% and run your code
add <div style="clear:both"></div>
You should do these things with Flexbox. If you're new, don't learn to use float for layout. Flexbox is made for this.
And use classes:
.container {
display: flex; /* makes container a flex parent and all its children flex children */
}
.left,
.right {
flex: 1; /* give 1 'part' of total width */
}
.right {
flex: 3; /* give 3 'parts' of total width */
}
Example: http://jsfiddle.net/rudiedirkx/tuojmn3g/
The flex property is very cool. If you give both children flex: 1, all children will be equal size: 50% (because 1 : 1). If you then give 1 of the children flex: 3, it will be 3x as big as the other (because 1 : 3). This gives you immense flexibility.
Flexbox is complicated but it's very well worth it to learn.
And a Flexbox bonus: equal height columns for free!
I have two separate divs, why is the background color the same lime color for both? I want the first div white.
Here's the HTML:
<div id="head1">
<ul>
<li><a class="menu" href="#">Link one</a></li>
<li><a class="menu" href="#">Link two</a></li>
<li><a class="menu" href="#">Link three</a></li>
<li><a class="menu" href="#">Link four</a></li>
</ul>
</div>
<div id="title1">
<h1>some title</h1>
</div>
Heres the CSS:
#head1 {
}
#title1 {
height:100px;
background-color:lime;
}
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
border-bottom:2px aqua dashed;
}
li {
display:inline;
}
a.menu {
float:left;
width:6em;
text-decoration:none;
color:#666666;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a.menu:hover {
background-color:#ff3300;
}
h1 {
font-family: Gautami;
font-size:300%;
color: #FFFFFF;
}
When you float the list, the #title div essentially appears as if it's behind it. To correct this, add overflow:auto to your #head1 element
#head1 {
overflow:auto;
}
jsFiddle example
It's actually white. You just can't see it.
Because the ul (and other elements) are floated left, those elemente are taken out of the DOM's normal flow. What this basically means is that the parent div, #head1 no longer "sees" the ul. Because of this, the height of the div becomes 0px tall.
Here's a fiddle demonstrating this: http://jsfiddle.net/w858z/
As you can see, #head1 has a red border, but the height is 0px. If we remove the floats, the ul is now in the normal flow.
Here's an updated fiddle with the floats removed: http://jsfiddle.net/48Ahm/
The fix for this is to use either a clearfix or simply overflow:auto.
overflow example: http://jsfiddle.net/w858z/1/
clearfix example: http://jsfiddle.net/w858z/2/
Here's a stackoverflow discussing additional css properties that will result in an element being taken out of dom flow: What are the CSS properties that get elements out of the normal flow?
You just need to clear the second div clear: both;
I made a jsfiddle :
http://jsfiddle.net/5gwZ6/
I'm trying to make a horizontal list where each of the <li>s in the list have a height of 385px and a width of 400px.
I tried making the list horizontal by using inline-block, but that doesn't seem to be working.
By which, I mean the list is still vertical. The <li>s are the right size, but the list is not horizontal.
How can I make this list horizontal? (Preferably without flexbox)
Here is my CSS:
html, body{
margin:0;
padding:0;
font-family:'Open Sans', sans-serif;
font-size:16px;
}
#slides{
list-style:none;
list-style-type:none;
}
#slides li{
height:385px;
width:400px;
display:inline-block;
}
and my HTML:
<form action="" method="get">
<fieldset>
<ul id="slides">
<div id="first">
<li>
1
</li>
</div>
<div id="second">
<li>
2
</li>
</div>
<div id="last">
<li>
3
</li>
</div>
</ul>
</fieldset>
</form>
You are making it totally wrong, you are using div which are block level element, also you cannot use any other element except li inside ul, so your markup is invalid, instead do it like this
<ul>
<li><div>A</div></li>
<li><div>B</div></li>
</ul>
<style>
ul li {
display: inline-block;
}
</style>
Add a float:left to #slides li
#slides li{float:left;}
Hope this helps.
Remove the divs and float the lis to the left:
HTML
<form action="" method="get">
<fieldset>
<ul id="slides">
<li id="first">1</li>
<li id="second">2</li>
<li id="third">3</li>
</ul>
</fieldset>
</form>
CSS
html, body{
margin:0;
padding:0;
font-family:'Open Sans', sans-serif;
font-size:16px;
}
#slides{
list-style:none;
list-style-type:none;
}
#slides li{
height:385px;
width:40px;
display:inline-block;
float: left;
}
http://jsfiddle.net/X6LkZ/1/
I'm trying to position two elements within an li list next to eachother on the right side to get the result:
Some text.................A...B Unfortunatelly the ordering drives me crazy.
Here's the html code:
<ul class="list">
<li>some text
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
With the following CSS code I was able to get the small-elements on the right side next to each other, but the result is that i see on the right side B next to A!
.list li{
background-color:#282828;
color:#ffffff;
font-size:20px;
text-transform:uppercase;
padding-left:5px;
}
.list small.a {
display:inline;
float:right;
}
.list small.b {
display:inline;
float:right;
}
So, I aim to have:
some tex.....................A...B
but for instance it looks like:
some text....................B...A
See example here --> http://jsfiddle.net/LKVdE/
Thanks upfront for any tip!
Here is the solution: http://jsfiddle.net/surendraVsingh/LKVdE/1/
CSS
.list small.a {
background-color: #000000;
display: inline;
}
.list small.b {
background-color: #ff0000;
display: inline;
}
.list li span{
display: inline-block;
float: right;
}
HTML
<ul class="list">
<li>Brennwert kJ / kcal
<span>
<small class="a">1109kJ / 261kcal</small>
<small class="b">455kJ / 107kcal</small>
</span>
</li>
</ul>
A and B should be put in a right floating container:
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
.floatright {
float:right;
}
And
<li>some text
<div class="floatright">
<small class="a">A</small>
<small class="b">B</small>
</div>
</li>
Why does this happen, because first style is applied to a which moves it to to the right, whatever next appears in the markup must now follow a from the right that's why you see BA instead of AB
Markup changes: Include the text inside a span and add float:left to it
<ul class="list">
<li><span class="text">some text</span>
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
Css changes, remove float:right from a and b and add float:left to text
.text{float:left;}
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
Working fiddle: http://jsfiddle.net/LKVdE/8/
I've created a jsfiddle http://jsfiddle.net/zkLav/ showing the code in action. what's happening is the images and text alignment are step stacking and not aligning vertically. Can anyone explain why this is happening?
CSS markup:
.outList {
display:table;
}
.outList span {
display:table-cell;
vertical-align:middle;
width:10%;
}
.outList h4 {
display:table-cell;
vertical-align:middle;
width:50%;
padding-left: 10px;
}
.outList p {
float:right;
display:table-cell;
vertical-align:middle;
/*width:30%;*/
text-align:right;
}
.outList img {
width:100%;
}
HTML markup:
<ul>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Warmup</h4>
<p>5 Minutes</p>
</div>
</a>
</li>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Machine Press</h4>
<p>3 sets of</p>
</div>
</a>
</li>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Lateral Pulldowns</h4>
<p>3 sets of</p>
</div>
</a>
</li>
</ul>
A proper image of the problem:
Ok, take a look at this update
Just remove the width in the next .css class:
.outList img {
width: 100%;
}
UPDATE
For the text at the right to be fully align, remove the float:right; from the p class:
.outList p {
float:right;
display:table-cell;
vertical-align:middle;
/*width:30%;*/
text-align:right;
}
Check this new update
Get rid of the divs, you don't need them given that you have the li's.
Also, why span the img? Get rid of that too.
When you did that, put the ul as the table, the li's as the rows and then the stuff in the a as the columns.