The body of my html document consists of 3 elements, a button, a form, and a canvas. I want the button and the form to be right aligned and the canvas to stay left aligned. The problem is when I try to align the first two elements, they no longer follow each other and instead are next to each other horizontally?, heres the code I have so far, I want the form to follow directly after the button on the right with no space in between.
#cTask {
background-color: lightgreen;
}
#button {
position: relative;
float: right;
}
#addEventForm {
position: relative;
float: right;
border: 2px solid #003B62;
font-family: verdana;
background-color: #B5CFE0;
padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body bgcolor="000" TEXT="FFFFFF">
<div id="button">
<button onclick="showForm()" type="button" id="cTask">
Create Task
</button>
</div>
<div id="addEventForm">
<form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
</form>
</div>
<div>
<canvas id="myBoard" width="600" height="600" style="background:lightgray;">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
</html>
Floats are okay, but problematic with IE 6 & 7.
I'd prefer using the following on the inner div:
margin-left: auto;
margin-right: 0;
See the IE Double Margin Bug for clarification on why.
You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;.
Old answers. An update: use flexbox, pretty much works in all browsers now.
<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div>
And you can get even fancier, simply:
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Right</div>
</div>
And fancier:
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
You can use flexbox with flex-grow to push the last element to the right.
<div style="display: flex;">
<div style="flex-grow: 1;">Left</div>
<div>Right</div>
</div>
Note that while this answer is not wrong, it is very outdated methodology written in 2015
Other answers for this question are not so good since float:right can go outside of a parent div (overflow: hidden for parent sometimes might help) and margin-left: auto, margin-right: 0 for me didn't work in complex nested divs (I didn't investigate why).
I've figured out that for certain elements text-align: right works, assuming this works when the element and parent are both inline or inline-block.
Note: the text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.
An example:
<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
<div style="display: block; width: 100%">
I'm parent
</div>
<div style="display: inline-block; text-align: right; width: 100%">
Caption for parent
</div>
</div>
Here's a JS Fiddle.
If you have multiple divs that you want aligned side by side at the right end of the parent div, set text-align: right; on the parent div.
Do you mean like this? http://jsfiddle.net/6PyrK/1
You can add the attributes of float:right and clear:both; to the form and button
Maybe just:
margin: auto 0 auto auto;
Simple answer is here:
<div style="text-align: right;">
anything:
<select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
</select>
</div>
Sometimes float: left leads to design problems, for that cases you can use display flex like this:
.right {
display: flex;
justify-content: flex-end;
margin-left: auto;
margin-right: 0;
}
<div>
<div class="right">Right</div>
</div>
If you are using bootstrap, then:
<div class="pull-right"></div>
One way could be setting a parent div for those elements that need to be pulled right and do the rest like the way shown in the the example below to have them right-aligned:
.parent-div {
display: flex;
float: right;
}
/*Below: child-div styling is not needed for this purpose! this is just for demonstration:*/
.child-div {
text-align: center;
background-color: powderblue;
margin: auto 10px;
height: 100px;
width: 50px;
}
<div class="">CANVAS div </div>
<div class="parent-div">
<div class="child-div">child 1</div>
<div class="child-div">child 2</div>
<div class="child-div">...</div>
<div class="child-div">child n</div>
</div>
If you don't have to support IE9 and below you can use flexbox to solve this: codepen
There's also a few bugs with IE10 and 11 (flexbox support), but they are not present in this example
You can vertically align the <button> and the <form> by wrapping them in a container with flex-direction: column. The source order of the elements will be the order in which they're displayed from top to bottom so I reordered them.
You can then horizontally align the form & button container with the canvas by wrapping them in a container with flex-direction: row. Again the source order of the elements will be the order in which they're displayed from left to right so I reordered them.
Also, this would require that you remove all position and float style rules from the code linked in the question.
Here's a trimmed down version of the HTML in the codepen linked above.
<div id="mainContainer">
<div>
<canvas></canvas>
</div>
<div id="formContainer">
<div id="addEventForm">
<form></form>
</div>
<div id="button">
<button></button>
</div>
</div>
</div>
And here is the relevant CSS
#mainContainer {
display: flex;
flex-direction: row;
}
#formContainer {
display: flex;
flex-direction: column;
}
display: flex;
justify-content: space-between;
hasnt been mentioned. if there are 2 elements (even if one is an empty div) it will place one on the left and one on the right.
<div style="display: flex; justify-content: space-between;">
<div id="emptyDiv"></div>
<div>I'm on the right</div>
</div>
You can simply use padding-left:60% (for ex) to align your content to right and simultaneously wrap the content in responsive container (I required navbar in my case)
to ensure it works in all examples.
You can do it easy by just add this css:
(Works in IE11)
<div>
<!-- Subtract with the amount of your element width -->
<span style="margin-left: calc(100vw - 50px)">Right</span>
</div>
I know this is an old post but couldn't you just use <div id=xyz align="right"> for right.
You can just replace right with left, center and justify.
Worked on my site:)
Related
I want to use CSS to hide entire groups of items when they don't have a threshold of named div items inside of them. I have 6 sections of faq 'questions', and a filtering mechanism that shows/hides these questions according to matching search terms. If after a search one or more of these sections does not have visible questions in it I don't want that section to be visible (ie. display: none;)
Is it possible to accomplish this purely with CSS? So that the jquery-driven reactive page search can rely on CSS to hide faq sections that don't have matching results inside of them? I have a general idea of how I'd accomplish this with JS, is it possible to do only using CSS?
To give an idea of what I'm thinking, I'd have:
<div class="group">
<div class="question" style="display: none;">
Question goes here
</div>
</div>
And I'd like to use CSS to apply something (display: none; or otherwise) to make the entire "group" invisible BECAUSE every div with the CSS class of 'question' is not visible from the display: none;
Based on answer in
check the parent div has the div with child class
You can control your divs if it is empty using .question:empty
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
body{
min-height: 100vh;
display: grid;
place-content: center;
font-family: Arial, Helvetica, sans-serif;
background-color: bisque;
}
.group{
display: flex;
flex-direction: row;
gap:1rem;
}
.question{
width: 5rem;
height: 5rem;
display: grid;
/* display:none; you can change this */
place-content: center;
background-color: aquamarine;
}
.question:empty {
display:block;
background-color: brown;
}
<div class="group">
<div class="question">
<p>Question</p>
</div>
<div class="question"></div>
<div class="question">
<p>Question</p>
</div>
</div>
EDIT AFTER COMMENT
The thing that you need is about selecting parent element. There is one actually which is :has pseudo class but still experimental. But i create a scenerio for you.
While you are applying inline style = display: none; in .question divs you can also apply them type="hidden"
and others which have question inside(visible divs) type:not-hidden
<div class="group">
<div class="question" style="display: none" type="hidden"></div>
<div class="question" type="not-hidden"></div>
<div class="question" style="display: none" type="hidden" ></div>
</div>
<div class="group">
<div class="question" style="display: none" type="hidden"></div>
<div class="question" style="display: none" type="hidden"></div>
<div class="question" style="display: none" type="hidden"></div>
</div>
Then u can use
.group{
display:none;
}
.group:has(div[type="not-hidden"]) {
display: block;
}
kind of selector(.group:has(div[type="not-hidden"])) to get the parent which has a child div have type="not-hidden"; then you can apply parent a display:block to get visible.
:has pseudo class only supported in Safari. Maybe you can try to check this in Safari.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one.
I've built a JSFiddle here to illustrate, with the following HTML:
<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
and CSS:
.embedded {
width:40px;
height:40px;
display:inline-block;
vertical-align:-15px;
border:1px solid black;
}
What I'd like is this:
What I get is this:
A pure-CSS solution would be nice, but I'm not against using JavaScript here either. Any help would be greatly appreciated!
You can do it quite simply with a wrapping div and a bit of flex box.
.wrapper {
display: flex;
align-items: baseline;
}
.note {
margin-right: 1ch;
}
.embedded {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: -15px;
border: 1px solid black;
}
<div class="wrapper">
<div class="note" style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
</div>
This will solve your issue:
`<div style="display: flex;">
<div style="padding-top: 13px;">NOTE: </div>
<div>
<p style="display:inline">
Here's
<span class='embedded'></span>
an embedded div
<br/>
and more text
</p>
</div>
</div>`
Link : JSFiddle
I am creating a simple css chart responsive that works on any browser.
This is my code:
<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;float:left;"></div>
<div style="width:10%;height:40%;background:#00ffff;float:left;"></div>
<div style="width:10%;height:80%;background:#00ffff;float:left;"></div>
</div>
But as you can see, the chart is inverted:
http://jsfiddle.net/xkd6twsq/
I tried with:
position:relative;
bottom:0px;
but doesn't work:
http://jsfiddle.net/xkd6twsq/1/
Use display: inline-block instead of float. The parent needs display: table-cell and vertical-align to align graph to bottom.
<style>
div {
display: table-cell;
vertical-align: bottom;
}
div div {
display: inline-block;
width: 10%;
background: #0ff;
}
</style>
<div style="width:500px;height:300px;">
<div style="height:20%;"></div>
<div style="height:40%;"></div>
<div style="height:80%;"></div>
</div>
http://jsfiddle.net/xkd6twsq/4/
The problem is the float:left, using display: inline-block will get what you want:
<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:40%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:80%;background:#00ffff;display:inline-block;"></div>
</div>
All about floats from CSS-tricks explains when to use floats and this display types answer details why floats are not the best option.
I have multiple elements in the a single div.
I want to align one element as "text-align: right" and another element "text-align: left"
Check the below code:
<div class="image_meaning" style="display: none; background-color: white; height: 35px; margin-left: 1px;">
<input type="checkbox" id="points" value="Temporal Filter" style="text-align: left; "/>
<label for="tempral_filter" style="text-align: left; ">Points</label>
<img style="text-align: right;" src="{{ STATIC_URL }}img/cross.png"/>-abc
<img style="text-align: right;" src="{{ STATIC_URL }}img/blue_triangle.png"/>-cde
</div>
but when I run the code it places both the element to the left.
any idea how to do it?
Answer
There are a few ways to solve your issue the most common one is using the css float property (as of 2016). The more modern ways are using flexbox or grid.
Solution using flexbox
You could use display: flex to do this.
Flexbox is only supported by newer browsers, If IE (9 and below) is your friend please stay away from this method.
Example html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
Example css:
.wrapper { display: flex; }
.block { width: 50%; }
Live demo.
Solution using grid
You could use the new display: grid to do this.
Grid layout is only supported by the most modern browsers (Sep 2017), If you are building on evergreen browsers then great, if not use flex.
Example html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
Example css:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
Live demo.
Solution using float
The css float property is the classic way to do this and can be dated back to prehistoric times so it supports basically every browser. The only caveat to this would be the clearfix issue (see below).
Example html:
<div class="wrapper">
<div class="block-left"></div>
<div class="block-right"></div>
</div>
Example css:
.block-left { float: left; }
.block-right { float: right; }
Please be aware that floated elements cause their parent to disregard them when it comes to their height. If that is an issue (usually it is), you can use the clearfix hack to solve this situation.
You would define it like so:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after { clear: both; }
And then on your parent element:
<div class="wrapper cf">
This will allow the parent to correctly receive the floated elements height.
Read more about what is the clearfix hack.
Live demo.
Other solutions
Solution using inline-block
You could also possibly use the inline-block property to put your elements side by side.
Note that the inline-block option will need to account for white space in the html between the blocks. To counter this, either remove the space like below, add a negative margin or define the font-size on the parent as 0.
Example html:
<div class="wrapper">
<div class="block"></div><div class="block"></div>
</div>
Example css:
.block { display: inline-block; }
/* Optional zero font for wrapper
Then reset blocks to normal font-size */
.wrapper { font-size: 0; }
.block { font-size: 16px; }
/* Optional negative margin if you can't
remove space manually in the html.
Note that the number is per use case. */
.block { margin-left: -.25em; }
Live demo.
Solution using position: absolute
Another way to do it would be to absolutely position your elements with a relative container. This method has the issue of being less flexible than the others when building responsive layouts and alike.
Example html:
<div class="wrapper">
<div class="block block-left"></div>
<div class="block block-right"></div>
</div>
Example css:
.wrapper { position: relative; }
.block { position: absolute; }
.block-left { left: 0; }
.block-right { right: 0; }
Live demo.
Why your solution is not working
You are using the text-align css property which will effect inline elements and text but it can't be used to shift the element like you would with the float property.
The text-align property effects the children of the element it is applied to.
Use float: left and float: right instead of text-align
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>