I'm trying to center dynamically generated divs (containing other divs and dynamic content), and have them align horizontally with up to 3 in a row, currently they're in line, but are not centered in parent div(ie. there is leftover space to the right). I've used alot of methods on other posts to no avail. Any help would be fantastic! :)
HTML: (PHP will generate any number of these)
<div id="div$j" class="divs">
<div class="image_ratio">
<img src="photos/Asset 1-100.jpg" onerror="this.src='Social_Icons/Rectangle 157#2x.png'">
</div>
<h3><?php echo $name; ?></h3>
<form type="text" name="form$j" id="form$j" action="AJAX.php" method="post">
<div class="aligner">
<button type="button" class="button_div")">X</button>
<button type="button" class="button_div">Y</button>
<button type="button" class="button_div">Z</button>
</div><br>
<input type="hidden"/>
<input type="hidden"/>
</form>
</div>
and all of these divs are wrapped together in:
<div class="BAJAX">.....</div>
CSS:
.BAJAX {
grid-area: pieces;
border: solid;
}
.image_ratio {
position: relative;
width: 25vmin;
height: 35vmin;
}
.image_ratio img {
margin: 0 auto;
width: 100%;
height: 100%;
object-fit: cover;
}
.divs {
width: 25vmin;
z-index: 98;
display: inline-block;
padding: 2.5%;
float: left;
margin: 0 auto;
border: solid;
}
Your best bet is to use flexbox. Your container (parent) will have display: flex and justify-content: space-between (so items can fill the space evenly). Then on each individual item (child) you will be setting flex-basis: 33% (or less as you will want items to have some margin/padding to delimit one from the other).
More info on this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Demo: https://codepen.io/Manu92/pen/PvvdMp
Instead of <div class="aligner"> use <div class="row">.
https://getbootstrap.com/docs/3.4/css
Also you can add it inside tag <h3>.
Related
I cannot figure out why my container (main-container) background is not stretching with the content inside. It looks like the container background is stuck on initial view height. When I scroll pass the initial view height, the rest of it is white.
Here is the css
.main-container {
margin: 0;
padding: 0;
font-family: 'montserrat';
height: fit-content;
}
.main {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: greenyellow;
border-radius: 10px;
margin-bottom: 40px;
padding-bottom: 20px;
}
<div class="main-container">
<div class="main">
<h1>Signup</h1>
<form method="POST">
<div class="txt-field">
<input type="text" required>
<span></span>
<label>First Name</label>
</div>
<h1>Upload Image</h1>
<button class="btn btn-primary">Upload<i class="fa fa-upload fa-1x"></i></button>
<input type="submit" value="Signup">
</form>
</div>
</div>
This is what it looks like initially.
This is what it looks like when I scroll down
The reason is that you have position: absolute on your .main class - any elements positioned absolutely will be taken out of the regular document flow and will have no effect on the layout of their parent(s).
It looks like you are using absolute position to try and center the .main element. Have you considered using a flexbox on .main-container instead? Using a flexbox with justify-content: center and align-items: center is an easy way to center an element inside its parent while keeping the regular document flow.
Sorry, I know this is super basic but I've been through my coding reference books all day and I think my mind's a little buggered. I need to get BOTH the input field AND the "submit" button in one line, in the center of the page, similar to Google.
.logo {
width: 50%;
display: block;
margin: auto;
}
.input-fields {
padding: 3%;
width: 40%;
display: block;
margin: auto;
font-size: 90%;
}
.submit {
padding: 3%;
width: 15%;
}
<header>
<img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="Search for anything...">
<input class="input-fields submit" name="find" type="submit" value="Find">
</form>
</div>
The problem I'm getting is that the button is stacking underneath the text-field. What am I missing out?
Well Google has it vertically and horizontally aligned so you should try something like this (simplified version):
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100vw; height: 100vh}
body {
display: flex;
justify-content: center;
align-items: center;
}
.align-me {
display: flex;
flex-direction: column;
align-items: center;
}
.align-me > .form-wrapper > .center {
display: flex;
}
<div class="align-me">
<header>
<img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="...">
<input class="input-fields submit" name="find" type="submit" value="Search">
</form>
</div>
</div>
But their design is not responsive and this is.
What you are seeing is the default behaviour of display:block.
Using display:inline-block will make them block elements so you can add padding, etc, but make them inline so they will appear beside each other (assuming they fit, and other styles don't change the default behaviour).
Just change the display from block to inline-block in your CSS here:
.input-fields {
[...]
display:inline-block;
}
Working snippet:
.logo {width: 50%; display:block; margin:auto;}
.input-fields {
padding:3%;
width:40%;
display:inline-block; /* change this from block to inline-block */
vertical-align: middle; /* this will help with any vertical alignment issues */
margin:auto;
font-size:90%;
}
.submit {
padding:3%;
width:15%;
}
/* Add this this to center your inputs -
you included the "center" class in your HTML but not it in your CSS */
.center { text-align:center}
<header><img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za"/></header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="Search for anything..."/>
<input class="input-fields submit" name="find" type="submit" value="Find"/>
</form>
</div>
You are missing a
display: inline-block;
on the elements you want to display in line. You currently have 'display: block;' This will push elements on to there own line.
You may also want:
vertical-align: middle;
To make them vertically aligned relative to each other.
To make sure they both stay dead center in the page put them all in a container (or just use your existing form container) and style it like:
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
This will ensure no matter what the screen size is the container is in the middle both vertically and horizontally.
I have a question about divs. I have multiple-divs in an parrent div, when I add content to the inner divs divs. The inner divs are pushed down?
I want to know why? Because all my mine margins and padding are add default 0;
Thank you for your time.
https://jsfiddle.net/3w50gj28/
<div class="boxes">
<div class="box">
<h3>MyBMW Login</h3>
<form class="" action="index.html" method="post">
<input type="text" name="email" placeholder="Emailadres">
<input type="password" name="password" placeholder="Wachtwoord">
</form>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.boxes {
margin-top: 25px;
width: 100%;
position: relative;
text-align: center;
}
.box {
display: inline-block;
width: 300px;
max-height: 400px;
min-height: 233px;
padding: 15px;
border: 1px solid #e6e6e6;
overflow-wrap: break-word;
background-color: #fff;
margin-right: 20px;;
}
div are Block-level Element and a block-level element always starts on a new line and takes up the full width available
Margin and padding in this case aren't what is causing it. If you have divs stacked on each other, as you add content to one it will grow and push the div below down.
I'd like to lay out HTML divs relative to one another, like Android's RelativeLayout.
Any idea how to achieve it? Thanks.
EDIT: The question is a general one but I see people request a specific example so here's the one from the link. You can simplify the example layout requirement to be: Blue square from start to finish. Below it two squares: Red and Yellow. Yellow to the right of red till the end. Below the yellow, a green square aligned to the right. Overall 4 divs, laid out relative to one another.
You can put divs on the same 'line' by using the display property in CSS.
Use
display: inline;
or
display: inline-block;
'inline-block' means your div can be given height and width properties while 'inline' will just be the size of your content. In this case, you'll probably want to use inline-block so you can line up your divs.
Found a way using float and clear:
<!DOCTYPE html>
<html>
<body>
<div style="width: 100%; height: 50px; background-color: blue;"></div>
<div style="width: 60%; height: 50px; background-color: red; float: left"></div>
<div style="width: 40%; height: 50px; background-color: yellow; float: left"></div>
<div style="width: 40%; height: 50px; background-color: green; clear:left; float: right">
</body>
</html>
You can play with the code here.
* The purpose of clear:left is to keep the green in the next line - even when the sizes of the red and yellow get changed to pixels instead of percentage.
Like Android, in HTML you cannot directly define Linear or Relative Layout. But through CSS you can define whatever design you want.
For example, in your question you have asked four inputs to align in a particular format.
You can wrap all inputs in a div, and make it align using float property.
The layout is here.
Edit: Here is the layout with .div2_2 in px value.
You can achieve this layout using the following html and css.
HTML
<div class="parent">
<div class="div1">
<input type="text" placeholder="Reminder Name"/>
</div>
<div class="div2">
<div class="div2_1">
<input type="text" value="Wed, Jun 27, 2012"/>
</div>
<div class="div2_2">
<input type="text" value="8.00am"/>
</div>
</div>
<div class="div3">
<div class="div3_1">
<input type="button" value="Done"/>
</div>
</div>
</div>
CSS
div{
padding: 3px 0;
}
input {
width: 100%;
}
.parent{
width: 400px;
}
.div1, .div2, .div3{
width: 100%;
}
.div2{
display: inline-block;
}
.div2_1, .div2_2{
display: inline-block;
}
.div2_1{
width: 55%;
float: left;
}
.div2_2{
width: 44%;
float: right;
}
.div3_1{
width: 30%;
display: inline-block;
float: right;
}
I hope this will be helpful for you.
Check out this page to find out how to layout your webpage in a "Grid System"
getbootstrap.com/css
I have two paragraphs. The two paragraphs are located in the same column. Now my question is I need to make the two paragraphs in two separate boxes, down each other. In other words, gap between two boxes coming down each other.
HTML Code
<div class="sidebar">
<div class="box1">
<p>
Text is here
</p>
</div>
<div class="box2">
<p>
Text is here
</p>
</div>
</div>
My CSS Code is
.sidebar {
background: red;
margin: 10px;
padding: 0 7px 0 7px;
width: 400px;
border-radius: 10px;
}
.box1 {
display: block;
padding: 10px;
margin-bottom: 30px;
text-align: justify;
}
.box2 {
display: block;
padding: 10px;
text-align: justify;
}
Like here
Please pay attention to the comments after the 2 lines.
.box1 {
display: block;
padding: 10px;
margin-bottom: 100px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1 */
text-align: justify;
}
.box2 {
display: block;
padding: 10px;
text-align: justify;
margin-top: 100px; /* OR ADD THIS LINE AND SET YOUR PROPER SPACE as the space above box2 */
}
I'm assuming you want the two boxes in the sidebar to be next to each other horizontally, so something like this fiddle? That uses inline-block, or you could achieve the same thing by floating the boxes.
EDIT - I've amended the above fiddle to do what I think you want, though your question could really do with being clearer. Similar to #balexandre's answer, though I've used :nth-child(odd) instead. Both will work, or if support for older browsers is important you'll have to stick with another helper class.
You can make use of the first-child selector
<div class="sidebar">
<div class="box">
<p>
Text is here
</p>
</div>
<div class="box">
<p>
Text is here
</p>
</div>
</div>
and in CSS
.box {
padding: 10px;
text-align: justify;
margin-top: 20px;
}
.box:first-child {
margin-top: none;
}
Example: http://jsbin.com/ozarot/edit#javascript,html,live
you can use $nbsp; for a single space, if you like
just using single allows you single space instead of using creating own class
<div id="bulkOptionContainer" class="col-xs-4">
<select class="form-control" name="" id="">
<option value="">Select Options</option>
<option value="">Published</option>
<option value="">Draft</option>
<option value="">Delete</option>
</select>
</div>
<div class="col-xs-4">
<input type="submit" name="submit" class="btn btn-success " value="Apply">
<a class="btn btn-primary" href="add_posts.php">Add post</a>
</div>
</form>
CLICK ON IMAGE
#firstDropContainer{
float: left;
width: 40%;
margin-right: 1.5em;
}
#secondDropContainer{
float: left;
width: 40%;
margin-bottom: 1em;
}
<div id="mainDrop">
<div id="firstDropContainer"></div>
<div id="secondDropContainer"></div>
</div>
Note: Adjust the width of the divs based on your req.
I know this was an old answer, but i would like to share my simple solution.
give style="margin-top:5px"
<div style="margin-top:5px">
div 1
</div>
<div style="margin-top:5px">
div2 elements
</div>
div3 elements