I'm trying to place two classes on the same line on opposite sides of a div.
I want the two buttons: Login & Register to be on extreme sides of the #home-button and on the same line.
Here is the HTML code:
<div id="content">
<div id="lcol" class="lfloat">
Hello
</div>
<div id="home-button" class="rfloat">
<div class="login-button Login">Login</div>
<div class="login-button Register">Register</div>
</div>
</div>
My CSS:
.login-button{
background:#4578bc;
color:#fff;
padding:15px 20px;
text-align:center;
}
#home-button{
width:100px;
margin:100px 0 0 0;
}
.lfloat{float:left}
.rfloat{float:right}
However, no matter what I try, the two buttons: Login & Register end up being on the same side on different lines.
The reason Login and Register are on different lines is because they are both block-level elements. You have to float one or both of them to put them on the same line, or make them inline.
Here is an example:
http://jsfiddle.net/K2Rtr/
<div id="right">
<div id="right-left">Login</div>
<div id="right-right">Register</div>
</div>
#right { float: right; width: 100px;}
#right-left {float: left; }
#right-right {float: right;}
In this example, Login and Register are on opposites sides of a div that is 100px wide and floated right.
Try following style,
.login-button {
background:#4578bc;
color:#fff;
padding:15px 20px;
text-align:center;
display:inline-block;
}
#home-button {
margin:100px 0 0 0;
}
http://jsfiddle.net/YvUER/
You can try this :
Edit :
.login-button {
background: #4578BC;
color: white;
padding: 15px 20px;
text-align: center;
width: 100px;
float: left;
}
#home-button {
width: 282px;
margin: 100px 0 0 0;
float: right;
}
If you use float:right; means it will create problems in bigger size monitor and high resolutions, so you can use left: 35%; position: absolute; for div2 to solve resolution issues.
happy coding...
Related
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
<html>
<head>
<title>My Play Store</title>
<style type="text/css">
body{
margin:0;
}
#container{
min-width:1080px;
}
#upperbar{
background-color:#F1F1F1;
height:60px;
width:100%;
}
#logobardiv{
margin:10px 20px 10px 30px;
float:LEFT;
}
#logo{
height:39px;
width:183px;
}
#searchbardiv{
float:left;
padding:15px 0px 15px 10px;
}
#searchbar{
height:28px;
width:545px;
font-size:1em;
}
</style>
</head>
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="images/logo.png"/>
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search"/>
</div>
</div>
</div>
</body>
In the above page that I am trying to make,the "searchbardiv" tends to move below "logobardiv" when I reduce the size of the browser window.
I just want want the two divs to be in the same line.I tried using "float:left",but it is not giving the required result.
Instead of using floats, try using display: inline-block for the two child elements and white-space: nowrap to keep them both on the same line.
Apply display: inline-block to both #logobardiv and #searchbardiv and apply vertical-align: middle (or other value as needed) to #logobardiv to take care of any vertical alignment issues.
Finally, apply white-space: nowrap to the #upperbar to keep the two child elements on the same line.
Note that for smaller enough screens, you could get horizontal scrolling. To fix this, you need to make a design decision to handle the situation. You could make the search input width smaller or the logo smaller or both, perhaps by using % widths instead to make them responsive. You have a few options available to solve the problem.
body {
margin: 0;
}
#container {
min-width: 1080px;
}
#upperbar {
background-color: #F1F1F1;
height: 60px;
width: 100%;
white-space: nowrap;
}
#logobardiv {
margin: 10px 20px 10px 30px;
display: inline-block;
vertical-align: middle;
}
#logo {
height: 39px;
width: 183px;
}
#searchbardiv {
display: inline-block;
padding: 15px 0px 15px 10px;
}
#searchbar {
height: 28px;
width: 545px;
font-size: 1em;
}
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="http://placehold.it/183/39" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
</div>
</div>
</div>
You Give your search bar width 545px try to reduce this when on small screen use media query:
e.g
#media(max-width:768px) {
#searchbar{
width:200px;
}
Hope this helps
search bar size is too long enough so it is displayed in next line.Set the logo size and search bar width in %.
width:70%;
Fiddle
solution 1: use % instead of pixel for width if you want divs to be flexible e.g:
#searchbar{
height:28px;
width:80%;
font-size:1em;
}
solution 2: if you don't want the divs to be resized with screen, set them as table cell:
#upperbar{
/* your current styles here */
display:table;
}
#logobardiv{
/* your current styles here */
display:table-cell
}
#searchbardiv{
/* your current styles here */
display:table-cell
}
What's the best way to align my arrow graphic in the middle and also touching the bottom of the bar above?
Right now it's aligned to the left and there is space between the top bar and the arrow.
See my jsfiddle: http://jsfiddle.net/huskydawgs/Z7dZR/26/
Here's my HTML
<!-- Start Form -->
<div class="wrapper-twocol">
<div class="twocol_row">
<div class="twocol_cell1">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
<div class="twocol_cell2">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
</div>
<!-- End Form -->
Here's my CSS:
/* 2 Column */
.wrapper-twocol {
position:relative;
width:100%;
border: none;
margin: 20px 0 37px 0;
}
.twocol_row {
height:100%;
white-space:nowrap;
}
.twocol_cell1, .twocol_cell2 {
height:100%;
width:47%;
display:inline-block;
white-space:normal;
vertical-align: top;
margin-left: 6%;
}
.twocol_cell1{
margin-left: 0;
}
.form-header {
background:#939598;
margin:0;
padding: 10px 0 10px 0;
color: #fff;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: 21px;
text-align: center;
}
.form-arrow {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
Change you styling slightly. Your div is the entire width of it's parent so you just need to center align that divs contents.
DEMO http://jsfiddle.net/Z7dZR/27/
.form-arrow {
margin: 0 auto;
text-align: center;
margin-top: -2px;
}
I'd suggest the following solution.
First, wrap arrows within a wrapper-div:
<div class="wrapper arrowWrapper">
<div class="form-arrow">
<img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12">
</div>
</div>
Second, apply following CSS:
.arrowWrapper {
width:209px; /*It's the width of the buttons calculated by the developer tools*/
}
.form-arrow {
margin:-3px auto 0 auto;
width:11px; /*width of the arrow*/
}
You can do it with css only (removing the arrow image and its wrappers from the markup)
using the ::after selector. That's how you will prevent repeating of the tag and the wrappers.
.form-header::after{
content: url('https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif');
position: absolute;
left: 50%;
bottom:-18px;
}
Here is the Demo: http://jsfiddle.net/7H5ea/1/
when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?
html e.g.
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welkom Bart</h2>
<hr />
</div>
css
#mainmenu {
height: 100px;
position: relative;
}
#logo {
float: left;
width: 200px;
margin-right: 20px;
}
#usermenu {
float: right;
}
#maintitle {
margin-bottom: 20px;
}
#maintitle hr {
color: #56c2e1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #56c2e1;
margin: 10px 0;
}
Add clear:both to #maintitle =)
Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.
Use this
<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />
Sorry if the title isn't very clear, but I'm trying to figure out how to solve the following problem using CSS.
I have a text that should be shown in two different lines: imagine first line is "hello world" and second is "goodbye"
I'd need to show the text in this way, in the center of the screen:
hello world
goodbye
I'm using this as first attempt but all I get is both lines centered. I'd need to have the second line aligned to the right.
div#logo {
clear: both;
padding: 1em;
border: 0;
margin: 1em auto;
text-align: center;
width: 75%;
}
Thank you.
The simplest solution: Have your paragraph aligned to the right with the max-width set to the width of the first-line, the second line will automatically break and be aligned to the right.
html
<div id="logo">
<p>Hello World goodbye!</p>
</div>
css
#logo
{
display:block;
width:100px;
position:relative;
margin-left:auto;
margin-right:auto;
}
#logo p
{
max-width:80px;
text-align:right;
}
Here's a functional fiddle
HTML:
<div id="logo"><p>First line<br />Remaining Text</p></div>
CSS:
div#logo {text-align:center;}
div#logo p {display:inline-block; text-align:right;}
If you know the width of the text inside the logo div it's a relatively simple thing to do, if you don't I do believe you're going to need jQuery to accomplish it.
<div id="logo">
<p class="right">
hello world<br />
goodbye
</p>
</div>
div#logo {
clear: both;
padding: 1em;
border: 0;
margin: 1em auto;
text-align: center;
width: 75%;
position:relative;
height:100px;
}
.right{
position:absolute;
width:90px;
margin-left:-45px;
}
Demo: http://jsfiddle.net/calder12/QnGDs/1/
If you put that text in a p element like:
<div id="logo">
<p>Hello world <br />goodbye</p>
</div>
And apply the following css:
div#logo
{
width: 75%;
margin: 0px auto;
}
#logo p
{
text-align: right;
}
I believe that is what you want.
How about putting your second line in some other container and then push it towards the right
<div id="logo">
hello world<br/>
<span class="right">goodbye</span>
</div>
div#logo {
clear: both;
padding: 1em;
border: 0;
margin: 1em auto;
text-align: center;
width: 75%;
}
.right {
text-align: right;
float: right;
}
only in case the width is known or pre-set
<div class="wrapper">
<div class="first-line">hello word</div>
<div class="second-line">goodbye</div>
</div>`
<style>
.wrapper{ width: 70px; margin: 0 auto;}
.first-line { float: left;}
.second-line{ float: right;}
</style>`
Explanation
.wrapper:
width - must be known and pre-set not necessarily in the css you can use in-line style
margin - top and bottom 0px where left and right equally balanced
.first-line:
float - to the left
.second-line
float - to the right
Please check the link to see working example
http://jsfiddle.net/pQTBz/