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>
Related
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>
the code i have tried is
CSS Code
#tools
{
float:left;
}
#sketch
{
border: 10px solid grey;
float:left;
width: 700px;
height: 500px;
position: relative;
}
HTML code:
<div id="tools">
<p>These are my tools</p>
</div>
<div id="sketch">
<p>This is my sketch</p>
</div>
<button type="button">Click</button>
I am placing the two divs side-by-side
the button is geting displyed side to the divs
but I want the button below the div
Fiddle here
Clear the float:
button { clear: both; }
Add wrapper with a clearfix:
<div class="wrapper cf">
<div id="tools">
<p>These are my tools</p>
</div>
<div id="sketch">
<p>This is my sketch</p>
</div>
</div>
<button type="button" >Click</button>
http://jsfiddle.net/brutusmaximus/5KmK6/3/
Try to use "clear: left;" for the button to cancel the "float: left" of the previous div element.
See http://www.w3schools.com/cssref/pr_class_clear.asp for more details.
You can use any of the two :
1) button {
clear : both;
}
2) Add a class clearfix to the Div - "sketch" that adds a pseudo element to the DOM after it to clear the float added.
<div id="sketch" class="clearfix">
<p>This is my sketch</p>
</div>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
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 would like to have two tags side-by-side as if being two columns.
So far I have
<div id="wrapper">
<div id="1">text here</div>
<div id="2">text here</div>
<div style="clear:both"></div>
</div>
What I'm having difficulty with is the CSS for the divs. Any help?
Check out the float property.
Quick example:
#1, #2 {
float: left;
width: 49%;
}
Check out this beginner tutorial on CSS Floats.
May be you can try:
div#wrapper {
display: table;
}
div#wrapper div {
display: table-cell;
padding: 5px;
}
or this one:
div#wrapper div {
display: inline-block;
}
As a start:
<div id="wrapper">
<div style="float:left;" id="1">text here</div>
<div style="float:left;" id="2">text here</div>
<div style="clear:both"></div>
</div>
CSS:
#1 {
float: left;
width: 50%;
}
#2 {
float: left;
width: 50%;
}
You could use float:left in conjunction with overflow-x:hidden; like so:
#1 {
float:left
}
#2 {
overflow-x:hidden;
}
add the following to your divs:
style="float:left"
#1, #2 {
display: inline-block;
}
Given that both #1 and #2 divs have a total width of not greater than the parent div.
If you use float, you will end up changing them to inline-block once you have to position a child div into absolute.
I'm displaying a list of links for voting, similar to Hacker News. I want the following layout for each link:
The gray boxes highlight the four divs for each link listed.
The key thing I need to do is get the "other text" div to be left-aligned with the link headline text.
I could define the width of the rank and arrow divs (the two little boxes), of course, and then indent the other text div accordingly. But this implementation has some downsides relative to my specific needs -- which I won't go into -- and more importantly, I just feel like there should be a more elegant way to achieve this. Something like a clear bottom for the rank and arrow divs, or maybe a property of the link headline div that tells the following div to appear directly below it.
Any ideas?
Why not just put the two right containers in one?
<div class="rank">9</div>
<div class="arrow">arrow</div>
<div class="content">
<div class="row1">Link headline text</div>
<div class="row2">other text</div>
</div>
<br class="clear" />
style:
.rank, .arrow, .content {
float: left;
}
.clear {
clear: left;
}
EDIT: Demo on jsfiddle
Solution 1
It seems that all four boxes for each item are in one bigger box (li maybe), so I would use:
<li>
<span class="num"></span>
<span class="upvote"></span>
<span class="main">main text</span>
<span class="add">more text</span>
</li>
and
.add { clear: both; float: right; }
Solution 2
Other solution would be padding on parent of each group of four and then negative margin-left together with float: left on number and upvote links.
Anything better can be tailored to your needs, but we need to see HTML :)
I'd go for a combination of the answers given by #Adam and #Czechnology, and use a list to display the content, and put the Link headline text and other text boxes into a single parent div. Like so:
HTML:
<ol class="headlines">
<li class="news-item">
<div class="rank">9</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
<li class="news-item">
<div class="rank">10</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
</ol>
Style:
ol.headlines {
display:block;
list-style-type:none;
list-style-position:outside;
margin:0;
padding:0;
}
div {
border:1px solid #00F;
}
ol.headlines .rank, ol.headlines .arrow, ol.headlines .content {
float:left;
}
.news-item {
clear:left;
}
ol.headlines h2,
ol.headlines .additional-content {
display:block;
}
You can find a sample of this here: http://jsfiddle.net/DEWtA/
Note that you'll need to alter the CSS to your needs with regards to the size of the divs and such.
Why not provide a wrapper element for the link headline text and the other text? Then float the wrapper instead.
http://jsfiddle.net/userdude/H3qPt/
HTML
<div class="linkblock">
<span class="score">100</span>
<span class="arrow">^</span>
<div class="linkdata">
<div class="linkurl">Link headline</div>
<div class="linktext">Other text</div>
</div>
<br/>
</div>
CSS
Some of this is just for demonstration.
.linkblock .score,
.linkblock .arrow,
.linkblock .linkdata {
float: left;
}
.linkblock br {
clear: both;
}
div, span {
border: 2px solid #ddd;
margin: 4px;
padding: 3px;
}
div.linkdata {
border: none;
padding: 0;
margin: 0;
}
You can contain the those two things into divs and then for the left div with the voting stuff, label the div with a class, "vote", and have the following CSS:
.vote {
margin: 0 0 100%;
}
I haven't tested it, but it should work like a charm.
Caveat: Doesn't work well with responsive design :(
The best solution would probably be to wrap 'link headline text' and 'other text' within a 'div' and use 'overflow: hidden;' on it.