I'm having problems making two elements align perfectly. They're in the same line, the one to the left is an input element and the one to the right is a div, in a "bar" (also a div). Please see the picture.
How it looks right now
What I want it to look like is for the two elements to have the exact same height, filling from top to bottom of the grey div with classname "wrapper".
I have simplified the code, and the button clearly doesn't work. What you can see in the code here is a small part of a react app, but that's irrelevant because the problem is in the CSS. The button needs to be a div.
The CSS code:
body{background-color: black}
.wrapper
{
background-color: grey;
padding: 0;
margin: 0;
}
input
{
font-size: 30px;
}
.button
{
background-color: green;
padding-left: 10px;
width: 100px;
height: 100%;
display: inline-block;
}
and the HTML code:
<body>
<div class="wrapper">
<input type="text" size="5"/>
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
I've tried setting the "display" of the elements to "inline" and "inline-block" back and forth, and tried to set the height to 100% for these elements which doesn't seem to work.
Thankful for any advice.
Just use flexbox
body {
background-color: black
}
.wrapper {
background-color: grey;
padding: 0;
margin: 0;
display: flex;
}
input {
font-size: 30px;
}
.button {
background-color: green;
padding-left: 10px;
width: 100px;
}
<body>
<div class="wrapper">
<input type="text" size="5" />
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
On the wrapper class add display: flex; and on the input tag add flex: stretch;
Related
My top div acts as a logo and has a title. I would like a logout button to be on the right-hand side of the div and text above also right-aligned.
I left out the button/ link as i did not know where to place it.
I'm looking for something like this:
My goal is a logo and, on the right, the logout button with text on the top.
How can I achieve that?
.logo {
overflow: hidden;
text-align: left;
position: relative;
margin: 0px 100px;
height: 60px;
background-color: pink;
color: blue;
font-family: Arial;
}
<div class="logo">
<h1>LOGO</h1>
</div>
You can use flexbox here. Try this out:
.wrap {
display: flex;
justify-content: space-between;
}
.logo {
overflow: hidden;
text-align: left;
position: relative;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
<div class='wrap'>
<div class="logo">
<h1>LOGO</h1>
</div>
<div>
<p>abcdefg</p>
<button>Click It</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/dm198kpx/2/
There are various ways to achieve what you want. I believe the simplest one is with Flexbox:
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
<div class="flex justify-between">
LOGO
<div>
BLABLABLA<br>
<button>Logout</button>
</div>
</div>
Here, flex is a display property that is usually used in container-type elements (like div). It helps to align content. It allows the use of various other properties like justify-content, align-items* and others. In this case, we are using only justify-content, which align direct children on the main axis (the horizontal one by default), with the space-between value, which distributes the content as far as possible - and since we have only two direct children of <div class="flex justify-between">, LOGO and <div>, put the first on the far left and the last on the far right.
*: you can learn more about Flexbox properties and use cases in this game: https://flexboxfroggy.com/
I've added the button to what I think is your header? I used the native header tag, but if it isn't your header, you can always replace this with a div with a unique id of your choice. I included position:fixed; in the css, otherwise the button wouldn't stay to the right (you could use float, but it can be problematic imho). Height/colour etc are adjustable of course.
Hope this helps
h1.logo {
display: inline-block;
position: relative;
text-align: left;
margin: 10px 100px;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
#logout {
background-color: lightblue;
height: 30px;
text-align: right;
right: 40px;
position: fixed;
}
.logo,
#logout {
vertical-align: top;
}
<header>
<h1 class="logo">LOGO</h1>
<button id="logout">Logout</button>
</header>
EDIT: Just saw the text-above edit to your question. See fiddle
I'm trying to do a simple page with two divs inside a large div which I'm using as a container for the whole page. For being able to do this I'm using the display: inline for the divs, but when I do this everything just wrecks itself.
div {
margin: auto;
border: 2px solid black;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
}
#container {
width: 95%;
min-height: 620px;
}
#options, #forms {
display: inline;
}
h1 {
text-align: center;
}
<body>
<div id="container">
<h1>BANCO DE LA NACION</h1>
<hr>
<div id="options">
<h3>Eliga su operación:</h3>
<input type="button" name="crear" id="creacion" value="Crear nueva cuenta">
<input type="button" name="mostrar" id="mostrador" value="Mostrar datos">
</div>
<div id="forms">
</div>
</div>
</body>
I'm wondering if there is another way of making divs spawn right to each other (without the usage of bootstrap which for the moment I'm trying to avoid) or in the case the way I'm doing it is the correct one, which is my mistake?
Use inline-block instead of inline.
Read difference between them in:
What is the difference between display: inline and display: inline-block?
CSS display: inline vs inline-block
Change inline to inline-block.
The example below shows a <button> element whose parent's height is not the height of the button. What's the best way to remove this excess height while remaining semantic and also keeping the <button> inline?
If I set the button to display:block then the excess height is removed. If I set the parent's font-size to 0, then it is also removed. If I change the <button> to a <div> element, then it is fixed as well. Should I just not be semantic?
I have tested this under the stable version of Google Chrome.
.box {
height: 30px;
width: 30px;
background-color: green;
}
.outer {
background-color: blue;
}
button {
border: 0;
margin: 0;
padding: 0;
}
<div class='outer'>
<button class='box'></button>
</div>
<button> is an inline-replaced element, so you just need to set the line-height property in CSS.
.box {
height: 30px;
width: 30px;
background-color: green;
}
.outer {
background-color: blue;
line-height: 0;
}
button {
border: 0;
margin: 0;
padding: 0;
}
<div class='outer'>
<button class='box'></button>
</div>
I hope this helps. If you need any additional help, please comment below.
This issue happened, because empty text don't rendered and baseline makes margin.
You can just add the text to your button, then it will correct rendered.
Also hardcoded vertical-align should make the trick.
.box {
height: 30px;
width: 30px;
background-color: green;
}
.fix {
vertical-align: sub;
}
.outer {
background-color: blue;
}
button {
border: 0;
margin: 0;
padding: 0;
}
<h5>Initial issue</h5>
<div class='outer'>
<button class='box'></button>
</div>
<hr/>
<h5>Add a text</h5>
<div class='outer'>
<button class='box'>+</button>
</div>
<hr/>
<h5>Fix by vertical-align</h5>
<div class='outer'>
<button class='box fix'></button>
</div>
I have a very simple design where I have 4 small boxes lined up on top of one another each with the same dimensions. However, when I try to apply "float: left" to the boxes, the background color of it's parent div goes away. Why is this? What does it have to do with the background color? I would just like my background color to remain the same.
See jsfiddle: http://jsfiddle.net/mush5ecc/
My html code:
<div id="careers">
<div class="container">
<h2 id="careers_title">Careers</h2>
<div id="four_grids">
<div id="top_left" class="grid"></div>
<div id="top_right" class="grid"></div>
<div id="bottom_left" class="grid"></div>
<div id="bottom_right" class="grid"></div>
</div>
</div>
</div>
My CSS code:
#careers {
background-color: orange;
}
.container {
width: 1026px;
margin: auto;
}
#careers_title {
text-align: center;
padding-top: 67px;
padding-bottom: 60px;
}
.grid {
width: 50px;
height: 50px;
float: left; /* COMMENT FLOAT TO SEE WHAT HAPPENS */
}
#top_left {
background-color: blue;
}
#top_right {
background-color: green;
}
#bottom_left {
background-color: red;
}
#bottom_right {
background-color: yellow;
}
Apply overflow: hidden to <div id="four_grids">.
See here for further details on this behaviour.
I'm a bit unsure of what your goal is, but I added the following css and I think this may be what you are looking for.
#four_grids {
position: absolute;
}
I have a HTML page with content divided into left and right part using CSS. The height of left content in smaller than the right content. Hence the right content div goes below to the left content div also. Eventually the border of right content is not a straight line.
How can we avoid the creeping of the right content towards the left?
How can we make the height of left content increased till the height of right content (with javascript)?
<html>
<head>
<title>My Page</title>
<style type="text/css">
.myContent {
width: 100%;
}
.myHeader {
}
.leftPart {
border: 1px solid blue;
width: 200px;
clear: left;
float: left;
background-color: red;
}
.rightPart {
border: 1px solid orange;
width: 100%;
background-color: beige;
}
</style>
</head>
<body>
<header>
<div class="myHeader">
H
</div>
</header>
<div id="body">
<div class="myContent">
<div class="leftPart">
A
</div>
<div class="rightPart">
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="SalesAndMarketing" name="SalesAndMarketing" type="text" value="" />
</div>
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="Text1" name="SalesAndMarketing" type="text" value="" />
</div>
</div>
</div>
</div>
</body>
</html>
fLoat one element, set margin to the other one.
.leftPart {
border: 1px solid blue;
width: 200px;
float: left;
background-color: red;
}
.rightPart {
margin-left: 200px;
border: 1px solid orange;
background-color: beige;
}
JSBin Demo
Update #1
If you consider using JavaScript, you might want to take a look at equalize.js.
equalize.js is a jQuery plugin for equalizing the height or width of HTML elements.
Here is an example:
// Equalize the height of div element children
$('.myContent').equalize({children: '> div'});
Here is the JSBin Demo.
Update #2
If you're looking for a pure CSS solution, you can use display: table-cell; CSS declaration.
But, honestly, I'd prefer using JavaScript rather than this, because using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table):
#body { display: table; width: 100%; }
.myContent { display: table-row; }
.leftPart {
width: 200px;
display: table-cell;
}
.rightPart {
display: table-cell;
}
Here is the JSBin Demo
Add this style:
.rightPart {
margin-left: 200px;
}