How can I get the content div to get at the bottom instead of that odd position?
http://jsfiddle.net/madprops/6FFXL/1/
<div>
<div style='float:left'>name </div>
<div style='float:left'>date </div>
<div style='float:left'>comments </div>
</div>
<div id="contenido" style="font-size:20px;">content</div>
EDIT: removed float:top
It is at the bottom for me in your example, (FF5), but you should probably make it safe by setting content to clear your floated divs, like this:
<div id="contenido" style="font-size:20px;clear:both;">content</div>
Also, the float:top on your first div is invalid, there is no top property of float.
Related
I want to create a faq page like Twitter's FAQ. The left column stays on that position even though the user keep scrolling.
So far here's what I made but it doesn't work.
<template>
<div>header here</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div style="position: sticky;">
1 of 2
</div>
</div>
<div class="col-lg-8">
2 of 2
</div>
</div>
</div>
</template>
According to this, we should add sticky property, but it doesn't work.
edit: I think it's because the two columns have the same height, so adding sticky property does not work. Any solutions on how to make the column height fit to the content only?
Any solution? Thank you!!
Position Sticky is not working on col-sm-4 because its parent class row has display:flex property. if you change
display:flex
to
display:block
then position Sticky property will work but it will change your design
I am trying to add space between elements <header> and section <section> but they are stuck to each other, such that when I apply margin to the bottom of the the top element or at the top of the bottom element, the top element moves down along with the bottom element, this only happened after I added the footer.
And I did a search but I was not able to find solution for this.
Thanks to All..
.hclass {margin-bottom:20;} // header - the top most part, need space below this
.tryi {margin:top;} //section the second part, need space above this
#divfootr {width:100%;height:auto;position:absolute;bottom:0;text-align:center;} // footer code
<header class="hclass">
<nav id="indxpg">
<div class="mainnav">
</div>
</nav>
</header>
<section class="tryi">
<div id="logotable">
</div>
</section>
<footer class="footer">
<div id="divfootr">
<p><span class="copyright"><strong>© 2016</strong></span></p>
</div>
</footer>
Your way to add margin is incorrect. It must be something like this (for a fixed margin) :
margin-top:20px;
Your missing px.
.hclass{margin-top:20px}
I've written this code:
<body>
<div>
<div style="padding:10px;float:left;height:500px;background-color:#ff6a00;">
Div1 -> Floated
</div>
<div style="padding:10px;height:600px;background-color:#5c64bb;display:-webkit-flex">
Div2 -> Not Floated
</div>
</div>
And result is the below image, I could achieve this result with using -webkit-flex display which works just in chrome, is there any idea which can give me the same result.
By the way, I don't want to use margin-left for Div2 and position absolute either.
If you don't mind specifying a static width for your left side you can achieve the flex type layout for the right with this:
<div style="display:table;width:100%;">
<div style="display:table-cell;width:130px;vertical-align:top;">
<div style="padding:10px;height:500px;background-color:#ff6a00;">
Div1
</div>
</div>
<div style="display:table-cell;vertical-align:top;">
<div style="padding:10px;height:600px;background-color:#5c64bb;">
Div2
</div>
</div>
</div>
http://jsfiddle.net/LHZKp/
I was able to get a similar effect using display: inline-block; on the second div and percentage widths.
<div>
<div style="padding:10px;float:left;height:500px;background-color:#ff6a00;width:15%;">
Div1 -> Floated
</div>
<div style="padding:10px;height:600px;width: 80%;background-color:#5c64bb;display:inline-block;">
Div2 -> Not Floated
</div>
</div>
fiddle
I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>
I have a div that seems to not be wrapping its inner content
http://c5.dealercontrol.net/inventory/p1
the div id="container" has a black bg and should be wrapping the inner content how can I get it to show the style around all the inner content...
You need to put in a "clear" div or property in your html/css. The code you need is below and i have typed quick example as to where to place it.
<div style="clear:both"></div>
You would place this tag inside your container div, but after all of the inner contents.
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div style="clear:both"></div>
</div>
Hope it helps...
This may be unrelated, but it seems that <div id="sort-results"> is missing its closing tag.