My right float is not working how i expect it to.
I want my button nicely aligned to the right of my text above a line :
<div style="padding: 5px; border-bottom-width: 1px; border-bottom-color: gray; border-bottom-style: solid;">
My Text
<button type="button" class="edit_button" style="float: right; margin:5px;">My Button</button>
</div>
However it always seems to hover over the line.
If I increase the padding or margin of the DIV then the button on the right still seems to be pushed over the line at the bottom.
I have tried to play around with paddings and margins of the button on the right, but i can't seem to get it to be placed neatly next to the text.
Fiddle is here:
http://jsfiddle.net/qvsy7/
Many thanks
you need to wrap your text inside div and float it left while wrapper div should have height, and I've also added line height for vertical alignment
<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
<div style="float:left;line-height:30px;">Contact Details</div>
<button type="button" class="edit_button" style="float: right;">My Button</button>
</div>
also js fiddle here =)
http://jsfiddle.net/xQgSm/
Here is one way of doing it.
If you HTML looks like this:
<div>Contact Details
<button type="button" class="edit_button">My Button</button>
</div>
apply the following CSS:
div {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
overflow: auto;
}
.edit_button {
float: right;
margin: 0 10px 10px 0; /* for demo only */
}
The trick is to apply overflow: auto to the div, which starts a new block formatting context. The result is that the floated button is enclosed within the block area defined by the div tag.
You can then add margins to the button if needed to adjust your styling.
In the original HTML and CSS, the floated button was out of the content flow so the border of the div would be positioned with respect to the in-flow text, which does not include any floated elements.
See demo at: http://jsfiddle.net/audetwebdesign/AGavv/
Verry Easy, change order of element:
Origin
<div style="">
My Text
<button type="button" style="float: right; margin:5px;">
My Button
</button>
</div>
Change to:
<div style="">
<button type="button" style="float: right; margin:5px;">
My Button
</button>
My Text
</div>
You have not used float:left command for your text.
LIke this
final answer
css
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
margin: 0;
padding: 0;
}
.edit_button {
float: right;
}
demo1
css
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
float: left;
margin: 0;
padding: 0;
}
.edit_button {
float: right;
}
html
<h2>
Contact Details</h2>
<button type="button" class="edit_button" >My Button</button>
demo
html
<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray; float:left;">
Contact Details
</div>
<button type="button" class="edit_button" style="float: right;">My Button</button>
Related
I created three tabs out of divs and put them along with a textbox into another div called window. I want window to encompass all of the content, have red background, and a blue border around it. The problem is that the tab divs appear to be overflowing their parent div (window) causing the background and border to fill a smaller area than should be filled.
I tried setting overflow:hidden on the window and this chopped off part of the tabs which I didn't want, however the border now went exactly around the content which is what I did want.
Also, I tried setting overflow:auto on the window, but this created a scroll bar which I don't want.
Is there a way to stop the child elements from overflowing or expand the window div to account for this overflow?
You can see the page I am trying to make here.
body {
background-color: #F79F94;
text-align: center;
}
.tab {
background-color: #F47564;
min-height: 50px;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.tab-right-line {
border-right-style: solid;
border-right-width: 1px;
border-right-color: #F79F94;
}
.tab-text {
color: white;
font-size: 14pt;
font-family: georgia;
}
#window {
border-color: blue;
border-style: solid;
border-width: 1px;
background-color: red;
display: inline-block;
}
<div id="window">
<div class="row">
<div class="col-xs-4 tab tab-right-line">
<h1 class="tab-text text-center">All</h1>
</div>
<div class="col-xs-4 tab tab-right-line">
<h1 class="tab-text text-center">Online</h1>
</div>
<div class="col-xs-4 tab">
<h1 class="tab-text text-center">Offline</h1>
</div>
</div>
<br>
<div class="row">
<input type='text' class='form-control' required>
</div>
</div>
Change this:
<div id="window">
to this:
<div class="container-fluid" id="window">
Here is the JSFiddle demo
I want to have a button float in the top right corner at all times, and the other buttons with dynamic width float around it at the left side and under it aswell.
The right button is the one which I want to stick, the blue one's can have different width which I cannot control.
What I've tried:
Setting the red button to position: absolute but that made it
overlap the other buttons
Added padding-right to surrounding box,
which forces the space under the red button to be empty.
Solve it using float: right on the red button, and make sure that the red button is the first in the html.
.container {
width: 300px;
}
.btn {
border: 1px solid #99f;
height: 30px;
width: 90px;
display: inline-block;
}
.btn.btn-red {
float: right;
border: 1px solid #f99;
}
<div class="container">
<div class="btn btn-red"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
I have multiple divs with dynamic content and all of them have the same height. Beside the content a Submit Button is inside of each div, which is directly next to the content.
But i want to display the Button at the bottom of the div.
HTML Markup:
<div class="product-teaser-row">
<div class="product-teaser">
<h2>Title</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<button class="btn btn-grey" type="submit" name="action">Ansehen</button>
</div>
<div class="product-teaser">
<h2>Title 2</h2>
<p>Content</p>
<button class="btn btn-grey" type="submit" name="action">Ansehen</button>
</div>
</div>
CSS Code:
div.product-teaser {
border: 1px #c7d2d6 solid;
padding: 0px 10px 10px 10px;
width: 216px;
height: 100%;
display: table-cell;
}
div.product-teaser-row {
display: table;
border-collapse: separate;
border-spacing: 10px;
}
I've already tried different things like vertical-align: bottom on the div and display: inline-block on the Button, but nothing worked for me.
Here is a JSFiddle Demo of my code.
You can try this
CSS
div.product-teaser {
border: 1px #c7d2d6 solid;
padding: 0px 10px 20px 10px; /*Increase the bottom padding so the button does not overlap the content*/
width: 216px;
height: 100%;
display: table-cell;
position: relative; /*Add this css*/
}
/*Set the button at the bottom using position: absolute;*/
.btn-grey {
bottom: 5px;
left: 5px;
position: absolute;
}
To do that you just have to position absolute your button and define the bottom position and give a padding-bottom to your container to be sure that no content will override your button.
here for a jsfiddle exemple.
You could try adding a height property to the p element.
Example:
p{
height: 95px;
}
JSFiddle Demo : http://jsfiddle.net/robcabrera/g3p2Y/1/
why don't you put button in separate <div> tag like:
<div id=my>
<button class="btn btn-grey" type="submit" name="action">
Ansehen
</button>
</div>
set according margin-top to put the button at bottom like:
#my
{
margin-top:100px;
}
FIDDLE here
I'm trying to get my textarea and div to be side by side and have the run button underneath but I'm not sure why it isn't working.
The output looks like this:
http://codeeplus.net/test.php
CSS:
.CodeMirror { height: 400px; width: 500px; border: 1px solid #ddd; }
.CodeMirror-scroll { max-height: 400px; }
.CodeMirror pre { padding-left: 7px; line-height: 1.25; }
#drawing { border: 1px solid #555555; float:left; width:480px; height: 400px; }
HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; width:50%; height: 50%; border: 1px solid #000000;">
<div style="float:left">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<html>
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</html></textarea>
</div>
<div style="float:left;">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<input type="button" id="run" value="Run" />
</div>
I would use two div's one to wrap around your text area and one to wrap around your other div. This way you can just use float: left; to put them both side by side :)
your code seems have many problems :), I made some changes:
remove float:left; from divs
set display:inline-block;
add clear:both tag before button
remove width:50%; and height:50% form first div
look at new HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; border: 1px solid #000000;">
<div style="display:inline-block; vertical-align:top;">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</textarea>
</div>
<div style="display:inline-block">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<div style="clear:both"></div>
<input type="button" id="run" value="Run" />
</div>
jsFiddle is here
You should use display: inline-block; property here, on the elements you want to align in one line:
div {
display:inline-block;
}
Online Example
The default value for div tags is display:block;
EDIT 1:
I have checked your page. The div that you're trying to align in is not aligning, because your parent div has width:50% and it's simply not fitting in there. Try changing it to, let's say width:100% and see that it really works!
EDIT 2:
Also remember, that if you use padding, as you apparently do on your page, it's affecting the actual (final) width of the element. For example, if you set the parent div's width: 1200px and padding as padding:10px;, then the actual div's size will be 1160px, cutting 10px on each side.
The links don't change the "holder" height at all, really I don't know what is wrong
HTML:
<div id="holder">
<a class="button" href="#"><span>home</span></a>
<a class="button" href="#"><span>example</span></a>
<a class="button" href="#"><span>another examp.</span></a>
<a class="button" href="#"><span>hello</span></a>
<a class="button" href="#"><span>abc</span></a>
</div>
CSS:
*{
margin:0;
padding:0;
}
#holder{
width:100%;
background: #000;
border: 1px solid red;
}
.button {
color: #444;
display: block;
float: left;
height: 24px;
margin-right: 6px;
padding-right: 18px;
}
.button span {
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
.button:hover {
background: #333 url('./images/bg_button_a.jpg') no-repeat scroll top right;
outline: none;
}
.button:hover span {
background: #333 url('./images/bg_button_span.jpg') no-repeat;
}
Elements do not automatically expand to contain floated descendents.
Adding overflow: hidden is one type of clearfix and so long as you don't mind elements being clipped at the element's bounding box, the easiest.
#holder {
overflow: hidden;
}
Further Reading.
It's because they are float:left, such subelements don't expand the dimensions of their parent.
Easiest way to counteract this is to add
<div style="clear:both;"></div>
at the end of the children. E.g:
<div id="holder">
<a class="button" href="#"><span>home</span></a>
<a class="button" href="#"><span>example</span></a>
<a class="button" href="#"><span>another examp.</span></a>
<a class="button" href="#"><span>hello</span></a>
<a class="button" href="#"><span>abc</span></a>
<div style="clear:both;"></div>
</div>
Opening span but closing li could cause some trouble.
<a class="button" href="#"><span>hello</li></a>
Floated elements to not extend the height of their container. Essentially, they are all bound to the top of the container (which visually is not the case).
Use a div with clear:left at the bottom of the container to expand it to contain the floated elements.
Floated elements do not count towards the height of their parent.
Setting overflow: hidden; on #holder is a neat trick to rectify that.