Why isn't display: inline placing my divs side by side properly? - html

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.

Related

How to make two elements both fill parent element (height)?

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;

How do I create a right aligned logout button?

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

How can I properly move my navbar to the right of my logo when using Skeleton grid

I'm using the skeleton grids and have vertically aligned my two columns using flexbox. However, this pushed my navigation closer to the logo image, and won't move to the right even using text-align or align.
The HTML:
<nav class="nav">
<div class="row">
<div class="one-third column">
<img class="brand" src="img/logo.png" alt="Logo" />
</div>
<div class="two-thirds column" align="right">
<span class="bars"><i class="material-icons">menu</i></span>
<ul>
<li>LOL</li>
<li>LOL</li>
<li>LOL</li>
<li>LOL</li>
<li>LOL</li>
</ul>
</div>
</div>
</nav>
The SCSS:
nav.nav {
display: flex;
align-items: center;
.brand {
width: 200px;
}
ul {
width: 100%;
margin: 20px;
list-style: none;
text-align: right;
li {
display: inline-block;
margin: 0;
a {
display: block;
text-decoration: none;
color: inherit;
text-transform: uppercase;
letter-spacing: 2px;
padding: 12px 16px;
border-bottom: 2px solid lighten($foreground-colour, 30);;
margin-right: -5px;
}
a:hover {
color: lighten($foreground-colour, 30);
border-bottom-color: red;
}
}
}
.bars {
display: none;
}
}
The image of the result I have now is this (logo scribbled out):
That's probably because you use the flex display on the nav, which contains only the row in which the logo and menu are. By default using a flex display without defining the flex property in the child, will result in flex: 0 1 auto for the child. This cuts the width of the child back to the combined width of its children(which are the logo and the menu), which is why they end up so close to each other.
So, in order to fix this, you either want to use the flex display in the row div, and then specify widths with the flexbox properties, removing the skeleton-css classes (they don't work well together).
Or, you could work with skeleton-css and play with line-heights and vertical-align properties in the row div. It's useful to temporarily give your divs and other elements a different color, so you can see what happens.

Bootstrap Prioritize Vertical Stacking

I would like to ask if this kind of column stacking is possible on Bootstrap without using Javascript or JQuery.
This One
instead of This.
I used
col-md-6
to style my columns at the moment, however I cannot figure out how to prioritize the stacking to fill vertical space first until it reaches the end (height) of the parent <div> followed by filling the neighboring horizontal space going down, and so on.
I could not find any topics about this anywhere in Google. So, I came here to see if it is actually possible or it isn't.
Thanks.
Yes, it's possible. But you need two wrappers. One for 1 ~ 4 second for 5 and 6.
jQuery is only used to demonstrate view-port change
$(document).ready(function() {
$('button').click(function() {
$('.wrapper').toggleClass('v2')
});
});
div div div {
border: 1px solid #ddd;
text-align: center;
font-weight: bold;
float: left;
padding: 20px 20px;
}
div {
box-sizing: border-box;
}
.wrapper {
width: 100px;
height: 250px;
}
.w-1,
.w-2 {
width: 50%;
float: left;
}
.v2 .w-1,
.v2 .w-2 {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="w-1">
<div class="col-xs-6">1</div>
<div class="col-xs-6">2</div>
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
<div class="w-2">
<div class="col-xs-6">5</div>
<div class="col-xs-6">6</div>
</div>
</div>
<hr/>Only for demo:
<button>Toggle layout</button>

Advice regarding wrapping text inside a div

I'm creating a contact card style layout, with a photo and text next to it, as demonstrated in this fiddle here:
http://jsfiddle.net/L7pWv/5/
HTML:
<div class="container">
<div class="contact-card">
<div class="photo"></div>
<div class="details">
<span class="name">My Name</span>
<span class="description">This is some really long text that should wrap nicely when things all work OK</span>
</div>
<div class="clearfix"></div>
</div>
<div class="contact-card">
<div class="photo"></div>
<div class="details">
<span class="name">My Name 2</span>
<span class="description">Short description</span>
</div>
<div class="clearfix"></div>
</div>
</div>
CSS:
.container {
width: 350px;
}
.contact-card {
background-color: whitesmoke;
border-bottom: 1px solid #ddd;
white-space: nowrap;
}
.contact-card .photo {
float: left;
width: 80px;
height: 50px;
background-color: tan;
margin: 10px;
}
.contact-card .details {
display: inline-block;
margin: 10px 0;
}
.contact-card .name {
display: block;
font-weight: bold;
line-height: 1em;
}
.contact-card .description {
display: block;
font-size: 0.8em;
color: silver;
line-height: 1em;
white-space: normal;
}
.clearfix {
clear: both;
}
As you can see from running the fiddle, when the text is really long, it does wrap eventually, based upon my white-space setting, but it exceeds the size of the contact card before doing so. I could put a right margin of 90px on the "description" class to keep the text within the bounds (which works), but I can't help but feel this is wrong. I'd like it to naturally want to stay within its parent's bounds, but can't think of the best way to achieve that. Any ideas?
Consider making these changes:
.contact-card {
display: inline-block;
}
.contact-card .details {
display: block;
}
This will keep each card displaying inline while keeping the text of the card inside the block without specifying a margin.
Kind of a tricky one, as I don't know what uses you'll be putting this in, but I'd probably do it with these changes.
Get rid of
<div class="clearfix"></div>
It's not needed if you make a simple addition like:
.contact-card {
float:left;
}
Then change .contact-card .details to this:
.contact-card .details {
padding: 10px 0;
}
That should give you the "The width of the details element should really be dictated by the parent." behaviour you're after
http://jsfiddle.net/L7pWv/6/
I suggest just don't use inline-block for this. You don't want the .detail element overflow on it's parent element. Because you already floated your photo, you can just place the element next to the photo element.
Note that you should use padding when you want space inside the element and use margin when you want it outside of the element.
There is no need for white-space: nowrap; as you floated the photo.
jsFiddle
The only thing i changed is the use of padding and margin and removed the white-space .
CSS:
.contact-card .details {
display: inline-block;
margin: 10px 0;
width:70%;
}
Fiddle: http://jsfiddle.net/L7pWv/2/