This may be very naive but I am struggling to make the div children of a parent div element horizontal
I am trying to make a header, here is my code
.logoImg {
width: 50px;
height: 50px;
}
.header {
display: flex;
justify-content: center;
float: left;
}
.logo {
margin: 0 auto;
display: flex;
}
.addressDropDown {
margin: 0 auto;
display: flex;
}
<header>
<div className="logo">
<img className="logoImg" src='https://via.placeholder.com/100x100' alt="" />
</div>
<div className="addressDropDown">
<p>Dropdown</p>
</div>
<div className="searchBar">
<input type="text" placeholder="What are you looking for?" />
</div>
<div className="languageSetting">
<p>language</p>
</div>
<div className="singInBtn">
<p>signIn</p>
</div>
<div className="cartBtn">
<p>Cart</p>
</div>
</header>
<body>
Body of the page
</body>
I would really appreciate it if someone can point out my mistake or give me some hints
Thank you
Just a small typo in your CSS code. The selector should be header (this selects all header elements) and not .header (this selects all element with the class "header")
Your mistake is, that you try to change the style of .header. However to access the <header> element you have to remove the dot:
header {
...
}
Related
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;
I have a div in the following format
<div id="main">
<div id="row1">
<div id="label1"></div>
<div id="value1"></div>
</div>
<div id="row2">
<div id="labe2"></div>
<div id="value2"></div>
</div>
<div id="row3">
<div id="label3"></div>
<div id="value3"></div>
</div>
</div>
I am trying to achieve a layout, where all the values are aligned on top of each other to the right and labels to the left within each row.
I have tried using float:left and float:right like
css
#row1{
display: inline
}
#value1{
float:right
}
#row2{
display: inline
}
#value2{
float:right
}
#row3{
display: inline
}
#value3{
float:right
}
But, this css i tried is missing the layout and row items are colliding into each other. Can someone help what could be the issue?
If you are familiar with how a HTML table works, then you can use display:table-* properties. Btw, use class instead of id. Use id specifically for things such as DOM manipulation or forms. Do not use id for styling unless you have no other choice.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>inline</title>
<style>
#main {
border: 5px dotted grey;
display: table;
width: 300px;
}
.row {
display: table-row;
}
.value {
border: 1px solid red;
display: table-cell;
width: 50%;
}
label {
border: 1px solid blue;
display: table-cell;
}
</style>
</head>
<body>
<main id="main">
<div class='row' id="row1">
<label for='value1'>V1</label>
<div id="value1" class='value'>44</div>
</div>
<div class='row' id="row2">
<label for='value2'>V2</label>
<div id="value2" class='value'>ALPHA</div>
</div>
<div class='row' id="row3">
<label for='value3'>V3</label>
<div id="value3" class='value'>💀</div>
</div>
</main>
</body>
</html>
If I've understood your question right you want to have labels on the left and values on the right just in front of their labels.
Here is example for you http://codepen.io/g1un/pen/PGKEwB
Add to your rows class row and to labels class label and apply the next css to it:
.row::after {
clear: both;
display: table;
content: '';
}
.label {
float: left;
}
And don't apply to your rows display: inline; - it just does harm to your code.
Here's my solution - rather simple, replaced your whole CSS (i.e. no other CSS):
* {
box-sizing: border-box;
margin: 0;
}
div {
border: 1px dotted #fa5;
}
#main > div > div {
display: inline-block;
width: 49.8%;
padding: 10px;
}
Codepen: http://codepen.io/anon/pen/GjvykB
Change the width value to any desired setting < 50%
P.S.: border isn't necessary, used only to visualize the elements, th very last padding also isn't necessary
If you don't need to support older IE browsers, go with flexbox
Side note: Don't use id like that, use class
.main > div {
display: flex;
}
.main > div > div {
margin: 0 10px;
}
<div class="main">
<div class="row1">
<div class="label1">1</div>
<div class="value1">One</div>
</div>
<div class="row2">
<div class="label2">2</div>
<div class="value2">Two</div>
</div>
<div class="row3">
<div class="label3">3</div>
<div class="value3">Three</div>
</div>
</div>
on my opinion - try display: inline-block; I will hope it help you.
Looking through some documentation, it looks like you an try using position for left and right alignment. I would suggest trying out something like in the documentation:
.right {
position: absolute;
right: 0px;
width: 300px;
}
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
I have very specific request for centering elements so I decided to try flexbox.
The request is following. I have 3 elements stacked vertically.
Header, content and footer.
A special condition is there to have middle element "content" centered on page (vertically and horizontaly) and header with footer stick on it from top and down. It should works with window resize.
There is hard-coded solution for better demonstration.
http://codepen.io/anon/pen/oXjVmE
I tried to solve that with flex box, but only what I get is that all 3 elements are centered together.
I am looking how to tell flex-box "First and last element should be same and max possible height"
http://codepen.io/anon/pen/GJpeYY
html
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<h2>Subheader</h2>
<p>Text</p>
</div>
<div class="centered">
Centered Text
</div>
<div class="footer">
Some tiny footer
</div>
</div>
css
.wrapper {
height:500px;
background-color:lightgreen;
.display(flex);
.flex-direction(column);
.align-items(center);
.justify-content(center);
text-align: center;
}
.header {
background-color:gold;
}
.centered {
height: 50px;
line-height: 50px;
background-color:deepskyblue;
}
.footer {
background-color:tomato;
}
You can achieve that result by simply using flex: inline-flex, and adding an outer container, like in the following
running demo
I've made the centered text content editable, so edit it and see that header and footer stretches themselves along with it.
.container {
text-align: center;
background-color: lightgreen;
}
.wrapper {
height: 500px;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.header {
background-color: gold;
}
.centered {
height: 50px;
line-height: 50px;
background-color: deepskyblue;
}
.footer {
background-color: tomato;
}
<div class="container">
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<h2>Subheader</h2>
<p>Text</p>
</div>
<div class="centered" contentEditable="true">
Centered Text - I'm editable, so... EDIT ME !!!!
</div>
<div class="footer">
Some tiny footer
</div>
</div>
</div>
Also FlexyBoxes tool is worthy a try for this kind of things.
remove wraper height:500px; and add height:100vh;
it is viewport height and i hope you will get what you want.
How do I vertically center an hr element?
I've tried to place the element in some div elements...
<div class="table">
<div class="table-cell"><hr /></div>
</div>
<div class="table">
<div class="table-cell">Some text Here!</div>
</div>
<div class="table">
<div class="table-cell"><hr /></div>
</div>
I've left out that I am using bootstrap and have these three div elements with the class of table in the same row using the col-size-number format.
So I'm looking for inline HR element Some Text inline HR element
--------------SOME TEXT--------------
Thank you again css guru masters!
For a simple, generic way to vertically center an hr element:
html:
<div class="container">
<hr />
</div>
css:
.container {
display: flex;
align-items: center;
}
.container hr {
width: 100%;
}
The hr element needs a width given to it (or flex-grow), otherwise it will be only a dot in the center of the container.
.container {
display: flex;
align-items: center;
height: 100px;
background: yellow;
}
.container hr {
flex-grow: 1;
}
<div class="container">
<hr />
</div>
To anyone who's stumbled upon this in the future, I have updated the answer to what I feel is a more modern, efficient approach using Flexbox
HTML:
<div class="title">
<hr />
<h3>Some text</h3>
<hr />
</div>
CSS:
.title {
display:flex;
flex-flow:row;
justify-content:center;
align-items:center;
}
hr {
flex:1;
}
h3 {
padding:0px 48px;
}
DEMO HERE
I used the following solution in my css, margin the element to the center on every device
CSS:
margin: 0 auto;