I have two elements that I want to place next to each other - one is a logo, the other is an "overflow" menu that will display a dropdown when clicked.
I want to have them scale so that the logo is at most 400px wide, and the menu button is always 1.5em wide and tall. The logo should stay vertically center aligned with the menu button, and the button should always be at the far right of the parent.
Tried using flexbox but I'm no CSS genius, I can't make it work. (btw, will we ever see CSS being more like the Android XML layout system? It'd be a breeze to use a LinearLayout with some gravity and weight to do something like this. With CSS it seems you always have to resort to hacks and hard-to-read solutions at some point)
So this is what it would look like when the logo is at it's maximum 400px width:
And here is what it would look like on a phone, where the logo needs to shrink to make room for the menu button:
Here's a solution using flexbox.
.header {
display: flex;
flex-direction: flex-end;
justify-content: space-between;
}
.logo {
background-image: url(http://placehold.it/400x50);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 50px;
max-width: 400px;
width: 100%;
}
.menu-toggle {
background-color: orange;
flex-shrink: 0;
height: 50px;
margin-left: 10px;
width: 50px;
}
<div class="header">
<div class="logo"></div>
<div class="menu-toggle"></div>
</div>
An easy way to do it is here.
.header{
margin:0px !important;
padding: 0px !important;
display: table;
width: 100%;
height: 1.5em;
overflow-y: hidden;
box-shadow: 0 1mm #aaa 5px;
vertical-align: middle !important;
position: relative;
}
#img-holder{
display: table-cell;
vertical-align: middle;
height : 100%;
background-color : blue;
max-width : 400px;
min-width : 250px;
padding: 0px !important;
}
#img {
display: table-cell;
max-width: 350px;
min-width: 150px;
height: 0.75em!important;
vertical-align: middle;
background-color: pink;
}
#menu-btn{
display: block;
margin: auto;
float: right;
height: 1.5em;
width: 1.5em;
background-color: orange;
border:none;
margin: 0px !important;
padding: none;
}
<div class="header">
<div id="img-holder"><span id="img"> Your Img</span></div>
<a id="menu-btn"></a>
</div>
I used line-height and vertical-align with calc.
html:
<div class="row">
<div class="menu-button"></div>
<div class="logo">
<img src="http://placehold.it/400x70">
</div>
</div>
css:
.menu-button {
background-color: #ffa200;
float: right;
height: 70px;
width: 70px;
}
img {
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
.logo {
float: left;
height: 70px;
line-height: 70px;
max-width: calc(100% - 80px);
}
Demo: https://jsfiddle.net/sabeti05/1yg32uqo/
Related
I've been really struggling making a horizontal card. I don't want to use flexbox, because I'm not very experienced with it. I want something to look like this:
I've already tried making the card and I'm able to get it to look similar although it doesn't adjust correctly to the text inputted in it.
I would recommend you learn some basic CSS in order to do simple layouts. Anyway here's a simple draft:
.container {
margin: auto;
width: 650px;
height: 150px;
padding: 0px;
text-align: center;
}
.leftbox,
.rightbox {
display: inline-block;
width: 200px;
height: 150px;
vertical-align: middle;
text-align: left
}
.leftbox {}
.rightbox {
border: 2px dashed pink;
background-color: pink;
width: 300px;
height: 146px;
}
.header {
margin: 10px 5px;
}
.data>p {
margin: 5px;
margin-left: 8px;
}
.leftbox {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG');
background-size: contain;
background-repeat: no-repeat;
}
<div class="container">
<div class="leftbox">
</div><div class="rightbox">
<div class="header">CARAMEL MACCHIATO</div>
<div class="data">
<p>SIZE</p>
<p>TOPPINGS</p>
<p>DELIVEERY</p>
<p>AMOUNT</p>
</div>
</div>
</div>
Basically, I am trying to put two circles next to each other (instead of on top)inside of a container.
However, there's a space between them and I want to get rid of it. How can I put two (or more) circles together?
https://jsfiddle.net/hLsu9qj0/
<div class="container">
<div class="circle">
circle 1
</div>
<div class="circle">
circle 2
</div>
</div>
css:
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
margin: 0 auto;
display: inline;
}
thanks everyone for your help!!!
It looks like all you're missing in your CSS is a float: left on the .container .circle { rule
UPDATED
One potential solution to the centering question (from comments) might be to make the .container div the size of the circles and center that
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
width: 100px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
float: left;
}
Or, as someone else suggested use display: inline-block and then set text-align: center on the .container
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
text-align: center;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 auto;
}
Try adding float to .container .circle
float:left
check this https://jsfiddle.net/hLsu9qj0/2/
Use display: inline-block; instead of display: block;.
And give margin: 0 5px; to .container .circle to give space between.
You can use float:left also.
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 5px;
}
Updated Fiddle
UPDATED : JsFiddle
OPTIONAL :
This is for overlapping of two circle.Take a look in JsFiddle
Second Way : Link
HTML:
<div class="container">
<div class="circle">circle 1</div>
<div class="circle">circle 2</div>
</div>
CSS:
.container {
position: relative;
width: 95%;
margin: 0 auto;
line-height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
margin-left:5px;
float:left;
}
Use float left in circle div
.container .circle {float:left;}
checkit out this http://jsfiddle.net/hLsu9qj0/9/
You should simply add the float:left; to the circle class. To guarantee also a good alignment, I suggest fixing the width and height of the container and set: height:100% to the circle, check the link:
//jsfiddle.net/hLsu9qj0/
you can use inside the container 2 div
<div class="container">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
put your code inside the 2 div column it defiantly works bootstrap but you need bootstrap css link inside your .html page
If you want to center them, change width of .container to .container {
clear: both;
overflow: hidden;
width: 23%;}
I'm trying to add two square ads to the right of the image on the web-site. The idea is to make this responsive like this:
http://s9.postimg.org/pdecyqi8f/div.png
Is this possible to achieve using CSS?
I use inline-block to position ads to the right and max-width: 100% to scale the image. I need the support of IE 9+ and mobile browsers.
I tried different approaches, don't even know which code example to show. It is relatively easy to position ads to the right of the image using inline-block:
div{
border: 2px solid;
}
#img,#container{
display: inline-block;
vertical-align: middle;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="img"> </div>
<div id="container">
<div id="ad1">ad1</div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/w7zfj1ju/
Yet in this case I won't get desired view on narrow screens. Also, since max-width: 100%; is used for #img this div would cover #ad1 and #ad2 on narrow screens.
To achieve desired mobile view I had to change HTML to the following:
div{
border: 2px solid;
display: inline-block;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
http://jsfiddle.net/gxnqo8da/
In this case I didn't really know how to position #ad1 to the right of the #img. I gave a try to absolute positioning, it did not work. Flex also seemed not to be an option due to compatibility reasons.
I also tried to use direction:rtl; like this:
div{
border: 2px solid;
display: inline-block;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/n1mo76bv/
and this:
div{
border: 2px solid;
text-align: left;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
display: inline-block;
}
#ad1{
display: inline-block;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
</div>
<div id="ad2">ad2</div>
http://jsfiddle.net/w7sknehL/
didn't help much since I could not position #ad2.
So, I don't ask to write any code. I'm just desperate for an advice.
If you don't need to support Android 2 and Opera Mini you can still use flexbox to achieve this result via media query. Example below:
.img {
width: 100%;
max-width: 100%;
height: 300px;
background: blue;
}
.ad {
background: red;
width: 100px;
height: 100px;
}
#media (min-width : 801px) {
.wrapper {
padding-right: 110px;
}
.img {
float: left;
}
.ad {
clear: right;
float: right;
margin-right: -110px;
margin-bottom: 10px;
}
}
#media (max-width : 800px) {
.wrapper {
display: flex;
flex-direction: column;
}
.img {
order: 2;
margin: 10px auto;
}
.ad {
margin: 0 auto;
}
.ad1 {
order: 1;
}
.ad2 {
order: 3;
}
}
<div class="wrapper">
<div class="img"> </div>
<div class="ad ad1">ad1</div>
<div class="ad ad2">ad2</div>
</div>
Also:
I didn't use browser prefixes for flexbox, so it will not work in all browsers. Add prefixes or use autoprefixer to make it work there.
Fix media query parameters for you needs, I only inserted width 800 as example value, real query to detect mobile will differ.
Below is a simple html web page that is responsive except for one div (goplay) that over lays other parts of the page when screen size is reduced, instead of dropping below the image.
Styling Sheet external
#wrapperlp {
width: 100%;
margin: auto;
}
#media screen and (max-width: 800px) {
#wrapperlp {
width: 90%;
min-width: 100px;
}
}
#headerlp {
font-size: 30px;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#para {
font-size: 20px;
color: white;
text-align: center;
}
#game_img {
height: 250px;
width: auto;
margin-bottom: -30px;
position: relative;
display: inline-block;
float: left;
margin-top:-30px;
padding-top: 5px;
max-width: 100%;
}
#goplay {
position: relative;
display: inline-block;
float: right;
margin-top:-250px;
margin-left:80px
}
#spacer {
height: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;
padding-top:20px;
}
Html which is set to call the above css
<div id="wrapperlp">
<div style="background-image: url(https://.jpg); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
<div id="headerlp">Some Text</div>
<div id="para">More Text</div>
<div id="game_img"><a href="//www.youtube.com/" target="_blank"><br />
<img src="https://.png" height="auto"/></a></div>
</div>
</div>
<div id="goplay">----form----/div>
<div id="spacer">
<div style="position: relative; float: left">Text</div>
</div>
margin-top and left should in %. thats y its overlay becoz of px
First off, it looks like you're missing a couple of divs.
The goplay div doesn't have a closing tag, (well it's got one but not that works)
Also your bottom spacer looks like it's missing a closing tag as well. Not sure if it's supposed to wrap anything or what.
Perhaps you had some copy/paste errors?
Normally if you set a negative margin it will overwrite other divs. You should, for the most part, not have to use negative margins.
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/