So I have two elements, in my case an image and a button. I have the image at the top of the page and the button at the bottom. I want to have a div (or some other element) to display text, but I need it centered between the two elements.
<div style="text-align: center;">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
<div style="text-align: center; border: 3px solid blue;">Help</div>
<button style="position: absolute; bottom: 5px;">Hi</button></div>
JSFIDDLE
I'm using HTML and Javascript.
Look into flexbox for modern layouts:
a guide to flexbox
You could use flexbox, as suggested in other answers. This can be hard to wrangle sometimes though, at your first go at it. Though it's highly recommended to add flexbox to your tool belt.
To fix this perhaps more simply:
1.) You could set the height of the parent div (to whatever you want) and then set the margin-top on the element that you want to make centered. You can tweak it until it sits right.
OR...
2.) Alternatively: You could also set the position:relative; and the top: 100px (or whatever sets it into the middle. Setting the position rule will allow you to set top, or left, right or bottom. Without setting the position rule, you can't use those rules.
Create a <div></div> to hold your text whatever you want to put in it and then manipulate that with CSS.
Flexbox provides the best and the short solution from the traditional solutions.
You can find the working fiddle here https://jsfiddle.net/rr0e4qh7/14/
Your Html
<div class="container">
<div class="image">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
</div>
<div class="text">
Help
</div>
<div class="btn">
<button>
My Button
</button>
</div>
</div>
Here is CSS part
.container{
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
}
.text{
display: flex;
height: 100%;
align-items: center;
justify-content: center
}
Related
I'm new to writing HTML and CSS, but I am on the final step of creating my website. Namely, the image slider which resides in the background.
The Issue: The pictures are not centered respective to the viewport.
The first image, for example, should have some padding on the left and
should be vertically aligned so as not to move when the height of the
image increases to match the viewport height. It should remain
centered behind the body of the page.
New Issue: When the first image's width expands over the viewport's, the images begin to move off-center because they are being locked at the left-hand side of the parent class/viewport. Is there a property that will allow the child class elements to expand past the parent's boundaries?
Could some of you wise web devs help me out here?
CodePen full version of the website: CodePen Link
Please go to "Full View", minimize your browser, and shorten its width to see what I mean.
Here is my HTML code for the slider:
<!-- Inside <html></html> and below <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
and my CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
Huge thank you in advance.
Use position and dynamic adjust left with click
I am making a web application with a panel. Inside this panel I want to have a constant-size button on the left, and some status text on the right. When the window shrinks, I want the text that is docked on the right to shrink to accommodate everything.
Example:
Initial:
[[BUTTON] [Status text]]
When shrunk:
[[BUTTON][Sta...]]
Two ways I know to get this docking are:
to make the Status text div position: absolute, but this takes it out of the flow and would just make it overlap
to use floats, but this causes the float:right element to just wrap to the next line when space runs out
I'm looking for a solution that leverages the browser positioning engine as much as possible as opposed to manually calculating things.
Is there a way to do it? Only concerned with modern browsers.
If you need support only modern browsers you can use flexboxes for this. Check this fiddle.
HTML:
<div>
<button>Button</button>
<span>Some text here...</span>
</div>
CSS:
div {
display: flex;
justify-content: space-between;
}
span {
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
I think this is what you are asking for https://jsfiddle.net/DIRTY_SMITH/komfhjdj/7/
You can do this many different ways however the two key attributes in my example are white-space: nowrap; and overflow: hidden;
HTML
<div class="wrapper">
<input class="button" type="button" value="button">
<div class="right">
Some text tttttt
</div>
</div>
CSS
.wrapper {
width: 100%;
}
.button {
width: 100px;
float: left
}
.right {
width: calc(100% - 100px);
float: left;
text-align: right;
background-color: lightblue;
white-space: nowrap;
overflow: hidden;
}
You could turn the outer container into a flexbox and work from there
<div style="display:flex; justify-content:space-between" class="container">
<button>
<p>Status Text</p>
</div>
The justify-content means that all the elements within the container will be pushed as far as apart as can fit within the box
I'm building a Twitter-Bootstrap site that has two columns: a narrow side column and a main article column. On each page, the widths of the columns are fixed and the heights depend on how much is inside them. The side column's height always must match the main column's, but the main column's height is variable. On some pages, the main column is short because there aren't many articles inside while on other pages its height is much longer. When the main column's height is taller than the side column's, the side column's increases.
My question is, what are the best methods/technologies to implement this, without using a CMS? I'm thinking classes, maybe something along the lines of masonry CSS...but not quite sure where to start. For the smaller-screen version, I'm planning to align them as just one column, so this won't need to be fully responsive.
I've prepared a crude drawing of what I'm trying to accomplish:
So, you can use flex-box for this. Your HTML would look something like this:
<div class="flex-container">
<div class="flex-column">
<!-- Left column content goes here -->
</div>
<div class="flex-column">
<!-- Longer right column content goes here -->
</div>
</div>
And your CSS:
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-container > .flex-column {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 50%;
}
Support for flexbox is limited, but it is the best solution for you here. http://caniuse.com/#feat=flexbox
UPDATE:
Here is a JSFiddle showing the implementation in action.
In addition to the flexbox option - which I'd definitely go for it if I wouldn't want full cross-browser compatibility -, you can use some JavaScript or jQuery to set the side height if it's smaller than the content height.
See it in action here! You can try it by removing dummy text from the content etc.
JavaScript:
var contentHeight = document.getElementById('content').offsetHeight;
var sideHeight = document.getElementById('side').offsetHeight;
if (contentHeight > sideHeight) {
document.getElementById('side').style.height=contentHeight+'px';
}
The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, in pixels, as an integer.
There is also clientHeight, which you could use depending on the case, which is:
The Element.clientHeight read-only property returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
jQuery:
var contentHeight = $(".content").height();
var sideHeight = $(".side").height();
var side = $(".side");
if (contentHeight > sideHeight) {
side.height(contentHeight);
}
If you can get away with it, I would recommend using flex box. If not, here is a CSS solution http://plnkr.co/edit/geevZTdUy4PDEJqvNHmp?p=preview
HTML:
<body>
<div class="container">
<div class="row eq-row">
<div class="col-xs-4 eq-col red">This is the first col</div>
<div class="col-xs-8 eq-col blue">
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
This is the main col<br />
</div>
</div>
</div>
</body>
Here's the CSS.
.red
{
background-color: red;
}
.blue
{
background-color: blue;
}
.eq-row
{
overflow: hidden;
}
.eq-col
{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
My problem is I would like a set of side by side divs. These divs can grow to an arbitrary height so vertical aligning is important. As suggested by another SO post, in order to tackle the vertical align problem I have a structure similar to this. Please help me fill in the blanks.
<div id="main-container">
<div class="formatter">
<div class="content1">
<!--- I am fixed at 200px ---->
</div>
</div>
<div class="formatter">
<div class="content2">
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
</div>
<div class="formatter">
<div class="content3">
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
</div>
Display within the browser:
CSS:
#main-container {
width: 900px;
}
.formatter {
display: inline-block;
vertical-align: middle;
}
.content1 {
float: left;
width: 200px;
}
You need to declare them as table-cell.
Lets try an unorthodox approach
Auto width and vertical alignment becomes very easy using CSS flex display
Code to get your basic layout, vertical and horizontal alignment (withour padding or borders or text-alignment)
<div id="main-container">
<div class="content1">a
<!--- I am fixed at 200px ---->
</div>
<div class="content2">bbb
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
<div class="content3">c
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
#main-container {
width: 900px;
display: flex;
}
.content3 {
flex-grow: 1;
}
.content1 {
width: 200px;
}
Fiddle - http://jsfiddle.net/n3CwB/
Now you may want to retain your original HTML structure if you want more control of the alignment of the content (like vertically align middle the content), but this should get you started with the basic layout.
I am currently creating many figures using the JavaScript library D3 (but I don't think D3 has any relevance for my problem). The figure is placed in div X and the text explaining the figure is in div Y. I basically want to create a pattern like this:
XYXYXY
XYXYXY
but instead (depending on how wide my window since I do not want to fix the width), what I get this:
XYXYX
YXYXY
I tried putting XY in a parent div Z<XY>, so that every pair of XY stays together, but that does not work. I also don't think clearing is necessarily the answer here, but I have tried all combinations without success.
Any help is greatly appreciated.
Try
white-space: nowrap
You may also have to change the floats to for your XY divs:
display: inline-block
If I understood the problem correctly, you don't need to use float. Display the divs as inline blocks: display: inline-block.
That will flow the divs as "character blocks" doing the wrap, you'll need to have a parent for the XY to keep the text together with the image.
An example: http://jsfiddle.net/D9BAv/
HTML:
<div class="figure">
<div class="picture"></div>
<div class="text">Example 1</div>
</div><!-- reapeated ... -->
CSS:
.figure {
display: inline-block;
}
.picture {
width: 3rem;
height: 3rem;
margin:auto;
background-color: blue;
}
If I have understood you correctly, maybe this will work. You could also use display: inline-block instead of float: left if you don't need to support IE8 and below.
http://jsfiddle.net/GQ8Uw/
HTML
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
CSS
.cont {
width: 100px;
float: left;
}
.x, .y {
width: 50%;
float: left;
}
.x {
background: #ccc;
}
.y {
background: #ecc;
}
Ok, I solved the problem. So I was wrong, it did have something to do with D3. Each time, I was essentially adding a child div to the same parent, and therefore the inline-block simply had no effect.
I ended up adding a "last-child" feature in my code like "d3.select(".figure:last-child").append(...", for both the picture and the text, and it works perfectly.
I saw the problem by adding a border around the parent div, and I noticed that all children were in the same div. I then found the solution from: What is the equivalent of jQuery's $(".cell:first") in D3?