This is pretty basic CSS question. I have this as my result:
I want the name and date to be on a single line next to the menu icon
HTML:
<div class="topnav">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<div class="topline">
<div id="name">John Doe</div>
<div id="date">04/27/2018</div></div>
</div>
CSS:
.topnav{
background-color: #3071a9;
color: #ffffff;
}
.topline{
padding-left: 20px;
}
#name {
float:left;
}
#date {
float:left;
}
add to your CSS :
.topline{
display: inline-block;
}
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
This needs to be made into a div and floated left like your name and date are. You also need topnav to be of the right width (whether it's fixed or not) for everything to fit inside, otherwise it'll be pushed down.
<div style="font-size:30px;cursor:pointer;float:left;" onclick="openNav()">☰</div>
You could keep it a span by using display:inline or inline-block, but since you're floating the other divs, might as well keep it consistent. Display in CSS
Stop all the floating! Use flexbox instead:
.topnav {
display: flex;
align-items: center;
background-color: #3071a9;
color: #ffffff;
}
#name,
#date {
margin-left: 20px;
}
<div class="topnav">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<div id="name">John Doe</div>
<div id="date">04/27/2018</div>
</div>
</div>
Related
I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one.
I've built a JSFiddle here to illustrate, with the following HTML:
<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
and CSS:
.embedded {
width:40px;
height:40px;
display:inline-block;
vertical-align:-15px;
border:1px solid black;
}
What I'd like is this:
What I get is this:
A pure-CSS solution would be nice, but I'm not against using JavaScript here either. Any help would be greatly appreciated!
You can do it quite simply with a wrapping div and a bit of flex box.
.wrapper {
display: flex;
align-items: baseline;
}
.note {
margin-right: 1ch;
}
.embedded {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: -15px;
border: 1px solid black;
}
<div class="wrapper">
<div class="note" style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
</div>
This will solve your issue:
`<div style="display: flex;">
<div style="padding-top: 13px;">NOTE: </div>
<div>
<p style="display:inline">
Here's
<span class='embedded'></span>
an embedded div
<br/>
and more text
</p>
</div>
</div>`
Link : JSFiddle
So I have two divs that contain text and I want to have them horizontally. I tried using the property display: inline-block but it doesn't seem to work.
Here is a jsfiddle of my attempt.
I think what you want to use is a ul instead of divs and that will allow you to have them all on the same line, if thats what you meant?
.row{
list-style: none;
}
.row li{
display: inline-block;
padding: 0 10px;
}
<ul class="row">
<li>A108 Adam Street</li>
<li>New York, NY 535022</li>
<li>info#exmaple.com</li>
</ul>
I think this is what you are trying for:
.text{
display: inline-block
}
.text1{
float: left;
}
.text2{
float: right;
}
<div >
<div class="ion-ios-location-outline text text1">
<i><p>A108 Adam Street<br>New York, NY 535022</p></i>
</div>
<div class="ion-ios-email-outline text text2">
<i><p>info#example.com</p></i>
</div>
</div>
If correct, you can reply for further explaination
Default of div is display: block; it makes the div get full width of page. So if you want to make 2 divs stay horizontally. You should set display of div to inline-block;
div {
display: inline-block;
}
.text{
display: inline-block
}
.text1{
float: left;
}
.text2{
float: right;
}
Just give the parent div a class and apply text-align:center property
.parent{
text-align:center;
}
<div class='parent'>
<div >
<i class="ion-ios-location-outline "></i>
<p>A108 Adam Street<br>New York, NY 535022</p>
</div>
<div>
<i class="ion-ios-email-outlinetext " ></i>
<p>info#example.com</p>
</div>
</div>
A div by default has its display attribute set to "block". So even if you are setting the display property of of its child tag, to "inline-block", that would not work.
Setting the parent divs to "inline-block" instead is probably what you need.
Here is the code for your reference (You do not need text, text1 and text2 classes. I've named the class you require as "display-inline-block")
<div>
<div class="display-inline-block">
<i class="ion-ios-location-outline"></i>
<p>A108 Adam Street<br>New York, NY 535022</p>
</div>
<div class="display-inline-block">
<i class="ion-ios-email-outline"></i>
<p>info#example.com</p>
</div>
</div>
And the following css
.display-inline-block {
display: inline-block;
}
P.S. You can also use the bootstrap css class "d-inline-block" instead, if you are using bootstrap in your project, rather than defining the custom class "display-inline-block".
Use of float Property :
.text {
display: inline-block
}
.text1 {
float: left;
}
.text2 {
float: right;
}
div div:last-child {
float:right;
}
div div:first-child {
float: left;
}
<div >
<div>
<i class="ion-ios-location-outline text text1"></i>
<p>A108 Adam Street<br>New York, NY 535022</p>
</div>
<div>
<i class="ion-ios-email-outlinetext text2" ></i>
<p>info#example.com</p>
</div>
</div>
I want to create a grid with two columns whose width will be equal. My base HTML code looks like this:
<div class="linkgrid">
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
<div class="gridentry">
Meeeedium
</div>
</div>
In this example, the first and the second gridentry should lie in the the first row. The thrid gridentry should lie in the second row. All gridentrys should have the same width.
~~~
I came up with a solution that uses a CSS table. However, to make sure the row "breaks" after every second cell, it currently requires non-semantic elements to force these "row breaks":
.linkgrid {
display: table;
border-spacing: 2px;
table-layout: fixed;
width: 50%;
}
.gridentry {
display: table-cell;
background-color: red;
padding: 5px;
text-align: center;
}
.gridentry a {
color: white;
}
.THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD {
/* I imagine a selector that looks somewhat like this:
.linkgrid .gridentry:nth-child(odd):outsidebefore {
*/
display: table-row;
}
<div class="linkgrid">
<span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"></span>
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
<span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"></span>
<div class="gridentry">
Meeeedium
</div>
</div>
Is there a way to remove my <span>s from my HTML (because they do not have any semantics) and use a clever CSS selector that adds them as pseudo elements at the right positions instead?
I do know that :before will "create" a pseudo-element within the selected element. Is there a non-JavaScript, CSS-only way to add a pseudo-element outside of the selected element like required in this example?
Another edit: For all those familiar with the Chrome developer tools, I want my result to look somewhat like this in the DOM tree:
<div class="linkgrid">
::outsidebefore
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
::outsidebefore
<div class="gridentry">
Meeeedium
</div>
</div>
...where the ::outsidebefore pseudo-elements should have the CSS property display: table-row;.
Update 2016-01-04: While this specific question remains unanswered, my original problem was solved another way: https://stackoverflow.com/a/34588007/1560865
So please only post replies to this question that answer precisely the given question.
Display Level 3 introduces display: contents:
The element itself does not generate any boxes, but its children and
pseudo-elements still generate boxes as normal. For the purposes of
box generation and layout, the element must be treated as if it had
been replaced with its children and pseudo-elements in the document
tree.
Then, you can:
Wrap each cell in a container element
Set display: contents to those containers
Add ::before or ::after pseudo-elements to those containers
The result will look like as if the pseudo-elements were added to the cell, but outside it.
.wrapper {
display: contents;
}
.wrapper:nth-child(odd)::before {
content: '';
display: table-row;
}
.linkgrid {
display: table;
border-spacing: 2px;
table-layout: fixed;
width: 50%;
}
.wrapper {
display: contents;
}
.wrapper:nth-child(odd)::before {
content: '';
display: table-row;
}
.gridentry {
display: table-cell;
background-color: red;
padding: 5px;
text-align: center;
}
.gridentry a {
color: white;
}
<div class="linkgrid">
<div class="wrapper">
<div class="gridentry">
Loooooooooooooong
</div>
</div>
<div class="wrapper">
<div class="gridentry">
Short
</div>
</div>
<div class="wrapper">
<div class="gridentry">
Meeeedium
</div>
</div>
</div>
Note display: contents is not widely supported yet, but works on Firefox.
The most straightforward way is using an actual table structure. That is, one table divided into rows, in which the entries sit.
Also, you had width:50% on the table, but I believe from the question text that you meant every table cell to be 50% wide, rather than the table taking up 50% of the window width; so I corrected that.
.linkgrid {
display: table;
border-spacing: 2px;
}
.gridrow { /* new */
display: table-row;
}
.gridentry {
display: table-cell;
background-color: red;
padding: 5px;
text-align: center;
width: 50%; /* moved */
}
.gridentry a {
color: white;
}
<div class="linkgrid">
<div class="gridrow">
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
</div>
<div class="gridrow">
<div class="gridentry">
Meeeedium
</div>
</div>
</div>
I have this header bar.
<div id="header">
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
</div>
I need the searchBar to fill whatever the remaining gap is in the div. How would I do this?
Here's my CSS
#header {
background-color: #323C3E;
width:100%;
}
.button {
padding:22px;
}
.orange {
background-color: #FF5A0B;
}
.red {
background-color: #FF0000;
}
.inline {
display:inline;
}
#searchBar {
background-color: #FFF2BC;
}
Use calc!
https://jsbin.com/wehixalome/edit?html,css,output
HTML:
<div class="left">
100 px wide!
</div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
Fills width!
</div>
CSS:
.left {
display: inline-block;
width: 100px;
background: red;
color: white;
}
.right {
display: inline-block;
width: calc(100% - 100px);
background: blue;
color: white;
}
Update: As an alternative to not having a space between the divs you can set font-size: 0 on the outer element.
You can realize this layout using CSS table-cells.
Modify your HTML slightly as follows:
<div id="header">
<div class="container">
<div class="logoBar">
<img src="http://placehold.it/50x40" />
</div>
<div id="searchBar">
<input type="text" />
</div>
<div class="button orange" id="myAccount">My Account</div>
<div class="button red" id="basket">Basket (2)</div>
</div>
</div>
Just remove the wrapper element around the two .button elements.
Apply the following CSS:
#header {
background-color: #323C3E;
width:100%;
}
.container {
display: table;
width: 100%;
}
.logoBar, #searchBar, .button {
display: table-cell;
vertical-align: middle;
width: auto;
}
.logoBar img {
display: block;
}
#searchBar {
background-color: #FFF2BC;
width: 90%;
padding: 0 50px 0 10px;
}
#searchBar input {
width: 100%;
}
.button {
white-space: nowrap;
padding:22px;
}
Apply display: table to .container and give it 100% width.
For .logoBar, #searchBar, .button, apply display: table-cell.
For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.
Use text-align and vertical-align in the table cells as needed.
See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/
I know its quite late to answer this, but I guess it will help anyone ahead.
Well using CSS3 FlexBox. It can be acheived.
Make you header as display:flex and divide its entire width into 3 parts. In the first part I have placed the logo, the searchbar in second part and buttons container in last part.
apply justify-content: space-between to the header container and flex-grow:1 to the searchbar.
That's it. The sample code is below.
#header {
background-color: #323C3E;
justify-content: space-between;
display: flex;
}
#searchBar, img{
align-self: center;
}
#searchBar{
flex-grow:1;
background-color: orange;
padding: 10px;
}
#searchBar input {
width: 100%;
}
.button {
padding: 22px;
}
.buttonsHolder{
display:flex;
}
<div id="header" class="d-flex justify-content-between">
<img src="img/logo.png" />
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
This can be achieved by wrapping the image and search bar in their own container and floating the image to the left with a specific width.
This takes the image out of the "flow" which means that any items rendered in normal flow will not adjust their positioning to take account of this.
To make the "in flow" searchBar appear correctly positioned to the right of the image you give it a left padding equal to the width of the image plus a gutter.
The effect is to make the image a fixed width while the rest of the container block is fluidly filled up by the search bar.
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
</div>
and the css
.container {
width: 100%;
}
.container img {
width: 50px;
float: left;
}
.searchBar {
padding-left: 60px;
}
in css:
width: -webkit-fill-available
I would probably do something along the lines of
<div id='search-logo-bar'><input type='text'/></div>
with css
div#search-logo-bar {
padding-left:10%;
background:#333 url(logo.png) no-repeat left center;
background-size:10%;
}
input[type='text'] {
display:block;
width:100%;
}
DEMO
http://jsfiddle.net/5MHnt/
Include your image in the searchBar div, it will do the task for you
<div id="searchBar">
<img src="img/logo.png" />
<input type="text" />
</div>
I did a quick experiment after looking at a number of potential solutions all over the place. This is what I ended up with:
http://jsbin.com/hapelawake
I have some DIVs with contents inside. I want to display them side by side and if there is no space, I want to break the whole div, so the contents don't go to a new line alone.
I've made this example of what happens.
Here is a screenshot from the link above.
csspos http://img709.imageshack.us/img709/6799/csswo.png
And here is the expected output
cssposright http://img826.imageshack.us/img826/8530/csse.png
How about http://jsfiddle.net/qB225/15/? That adds
.item {
...
white-space: nowrap;
}
Put non-breaking space between your links and spans.
http://jsfiddle.net/qB225/22/
http://jsfiddle.net/qB225/21/
.master
{
width: 160px;
}
.item
{
display:inline-block;
font-size: 11px;
padding: 2px 2px 2px 0;
}
.item { display:inline; } /* DO NOT REMOVE, FOR IE */
.item a
{
text-transform: uppercase;
}
If you want them to only wrap as pairs you need to do two things. First change your html so that you group your item divs in pairs of two:
<div class="master">
<div>
<div class="item">
Text
<span>(10)</span>
</div>
<div class="item">
Text
<span>(10)</span>
</div>
</div>
<div>
<div class="item">
Text
<span>(10)</span>
</div>
<div class="item">
Text
<span>(10)</span>
</div>
</div>
</div>
And then add a float to the grouping divs:
.master > div{ float:left; }
Try using "inline-block" as follows:
.item
{
display: inline-block;
font-size: 11px;
padding: 2px 2px 2px 0;
}
Thanks.