How to not push other elements away when increasing margin on the same line. I have <a> elements and a button element. When I try to increase the left-margin of button, the <a> margin gets pushed away. I just want the button to go to the right of the page. Tried using float but I don't want it to go to the extreme left (leave some space).
a {
font-family: Arial;
font-size: 12px;
align-items: center;
margin-right: 50px;
color: black;
text-decoration: none;
}
nav {
margin-top: 30px;
}
.chat {
width: 100px;
height: 35px;
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Arial;
font-weight: 600;
cursor: pointer;
margin-left: 0px;
}
<nav>
<div class="navbar" align='center'>
Home
Works
About
Projects
<button class='chat'>Let's chat</button>
</div>
</nav>
I just want the button to go to the right of the page.
Use flex-box. Wrap your links inside a container and set display of it's parent element to flex and remove the width property of the button.
a {
font-family: Arial;
font-size: 12px;
align-items: center;
margin-right: 50px;
color: black;
text-decoration: none;
}
nav {
margin-top: 30px;
}
.chat {
height: 35px;
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Arial;
font-weight: 600;
cursor: pointer;
}
.navbar {
display: flex;
justify-content: space-around;
align-items: center;
}
<nav>
<div class="navbar" align='center'>
<div class="links">
Home
Works
About
Projects
</div>
<button class='chat'>Let's chat</button>
</div>
</nav>
If you want to use float you need to set a width on nav and then float button right and navbar float left.
a {
font-family: Arial;
font-size: 12px;
align-items: center;
margin-right: 50px;
color: black;
text-decoration: none;
}
nav {
margin-top: 30px;
width: 600px;
}
.navbar{
float:left;
}
.chat {
width: 100px;
height: 35px;
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Arial;
font-weight: 600;
cursor: pointer;
margin-left: 0px;
float:right;
}
<nav>
<div class="navbar" align='center'>
Home
Works
About
Projects
</div>
<button class='chat'>Let's chat</button>
</nav>
So I am trying to make it look like this
However, it currently looks like this
As, you can see the top section with the logo and register have their own section. I want it to stay on top of the background image. I do not want to use position: absolute; or position : fixed; since i want it to say in its own section. I have also tried using a negative margin and it does not work. Any help is appreciated.
.top-firstsection {
display: flex;
}
.logo-header {
height: 80px;
}
.nav-list {
margin-left: auto;
list-style: none;
display: flex;
}
.leftandright {
display: flex;
justify-content: space-between;
}
.login {
font-family: Helvetica;
font-size: 13px;
color: #000000;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
cursor: pointer;
}
.register {
font-family: Helvetica;
font-size: 13px;
color: #0972D7;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
}
.first-left {
padding-top: 220px;
padding-left: 171px;
}
.first-left h1 {
font-family: Poppins-Regular;
font-size: 40px;
color: #000000;
letter-spacing: 0;
line-height: 50px;
}
.sectionOne-textbox {
border: 1px solid #EBEBEB;
border-radius: 4px;
font-family: Helvetica;
font-size: 14px;
color: #000000;
letter-spacing: 1.05px;
line-height: 52px;
width: 80%;
}
.sectionOne-button {
background: #1F8FFB;
border-radius: 4px;
border: 1px solid;
padding: 16px 25px;
font-family: Helvetica;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 1.3px;
text-align: center;
margin-top: 24px;
}
<section class="first-section">
<div class="top-firstsection">
<img src="logo.svg" alt="logo" class="logo-header">
<ul class="nav-list flex">
<li>
LOGIN
</li>
<li>
REGISTER
</li>
</ul>
</div>
<div class="leftandright">
<div class="first-left">
<h1>Open marketplace <br> for ordering & purhasing <br> scientific experiments</h1>
<input type="text" id="" class="sectionOne-textbox" placeholder="Discover new experiments...">
<button class="sectionOne-button">GET STARTED NOW!</button>
</div>
<div class="first-right">
<img src="firstsectionbackground.png" alt="main graphic" class="main-graphic">
</div>
</div>
</section>
I want display the text on a new line for every p tag, so I did:
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
.create-holiday *
{
margin-top: 100px;
vertical-align: middle;
text-align: center;
}
.create-holiday-title
{
width: 297px;
height: 22px;
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle
{
width: 276px;
height: 18px;
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
but the p tag are displayed on the same line.. What I did wrong?
It sounds like your p tag's widths are set to less than 100% and/or your p tags are set to a display of inline or inline-block.
In your CSS file, try this:
p {
display: block;
width: 100%;
}
If that doesn't work, you can always add br tags at the end of each p tag, but you really shouldn't have to do that.
Add A br tag in the middle of the p tags so they don't show up on the same line
<p> tags are block level elements, and therefore you don't need <br> tags. Your code seems to work for me...
.create-holiday * {
margin-top: 100px;
vertical-align: middle;
text-align: center;
}
.create-holiday-title {
width: 297px;
height: 22px;
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle {
width: 276px;
height: 18px;
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
.create-holiday * {
margin-top: 100px;
display: flex; //make it flex
align-items: center; //flex middle vertical align
justify-content: center; //flex center align
}
.create-holiday-title {
width: 297px;
height: 22px;
overflow: hidden; //force p to height and width size
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle {
width: 276px;
height: 18px;
overflow: hidden; //force p to height and width size
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
Somehow one of the group of the same block elements on the picture gets inexplicably big height. Styles shown on the pic don't suggest that kind of behavior for this element. In fact, height isn't even set for those h3's.
Browser screenshot
The html is
<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
The more you know
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>
Three same div.about-work-details elements.
The default css is
.about-us{
background-color: #fff;
position: relative;
}
.about-us-heading{
color: #272d32;
}
.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}
.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}
.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}
.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}
.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}
.about-work-details:last-of-type{
margin-right: 0;
}
.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}
Media query modifications
#media screen and (max-width: 860px){
.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}
.about-us{
padding-bottom: 1px;
}
.about-work-details:last-of-type {
margin-right: auto;
}
}
Seems like a floating item behavior issue.
Try removing/commenting float:left; from .about-more.
I am working on a simple html/css web page.
What I am trying to do is having an image and a div. Both will be inline display and in div I want to put a link. But when I put a long link title it is not what I expect it to be.
My code is this-
code
<div class="heading"> featured posts
</div>
<div class="img_src">
<img style="height:120px;" src="/uploads/1.jpg"></img>
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
CSS-
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
line-height: 120px;
width: 61%;
margin-top: 3px;
text-transform: uppercase;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
I searched on google and StackOverflow but I did not get anything useful.
I want it to look like this(DIV wraps full)-
Any suggestion?
You csn use diplay:table-cell instead of inline-block but also I made edit in html by adding div.post that contain the image and title, and remove the inline-style that gave height to the image
<div class="post">
<div class="img_src">
<img src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
</div>
<div class="link_src">
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
</div>
and in the css I give width:20%; to .img_src and width:80%; to .link_src (you can change the widths as you like) and remove height and line height from them and the diplay:table-cell will handle those height
.post{
font-size:0;
display:table;
width:100%;
}
.img_src{
display: table-cell;
vertical-align:top;
width:20%;
}
.img_src img{
width:100%;
}
.link_src{
display: table-cell;
background-color: white;
margin-top: 3px;
text-transform: uppercase;
vertical-align:middle;
width:80%;
}
.inside_link{
margin-left: 2%;
margin-right: 2%;
font-size: 15px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
https://jsfiddle.net/IA7medd/gg7ygdLs/17/
You can achieve that by changing the inline-block display to table-cell and then apply the vertical-align:middle; property on the text container.
That way, the text will be perfectly vertically centered if there are one, two, three lines of content.
.parent{
display: table;
border: 5px solid #ccc;
width: 100%;
}
.img_src{
display: table-cell;
}
.link_src{
display: table-cell;
vertical-align: middle;
background-color: white;
width: 61%;
text-transform: uppercase;
}
See this fiddle
Ok you are using the wrong approach. Line height is causing you the problem. Your html should look like this
<img class="img_src" style="height:120px;" src="/uploads/1.jpg">
<div class="link_src">
<div class="inner_link_src">
<div class="inner_margin">
Link will go here but if there is a long title then it may create some problems..
</div>
</div>
</div>
and your css like this
.img_src{
float:left
}
.link_src{
float:left;
position:relative;
width: 61%;
text-transform: uppercase;
background-color: white;
vertical-align: top;
display:table;
height:120px;
}
.inner_link_src{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
margin-left:10px;
}
.inner_margin{
margin-left:10px;
}
see the jsfiddle it is working great
https://jsfiddle.net/gg7ygdLs/27/
You just change your CSS and HTML by following and then you get the desired result.
CSS:
.img_src{
display: inline-block;
margin-top: 3px;
margin-left:-2%;
}
.link_src{
display: inline-block;
background-color: white;
height: 120px;
width: 100%;
margin: 10px 0 10px 3px;
-webkit-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
-moz-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
}
.inside_link{
margin: 2%;
display: inline-block;
position:absolute;
padding: 8px;
}
.heading{
display: block;
background-color: #000;
color: #fff;
font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
font-size: 20px;
margin-top:5px;
font-color:white;
margin-left:-2%;
margin-right:-2%;
text-align: center;
line-height: 40px;
height: 40px;
font-style: oblique;
text-transform: uppercase;
}
HTML:
<div class="heading"> featured posts
</div>
<div class="link_src">
<img style="height:120px;" src="http://smashinghub.com/wp-content/uploads/2011/11/Text-Shadow-Box.jpg" />
<a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</div>
Demo
You can simplify your code a lot by using Flexbox.
You can use it for your header as well, to center the title.
.your-header {
display: flex;
align-items: center;
justify-content: center;
}
Then the image container. Use it's more semantic and it's a block element, perfect to wrap an image with a caption or a link in your case:
<figure class="your-figure">
<img class="your-image" src="http://pipsum.com/200x150.jpg"></img>
<a class="your-link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</figure>
and the CSS
.your-figure {
display: flex;
align-items: center;
padding: 4px;
border: 1px solid #ccc;
background-color: #fff;
}
.your-image {
margin-right: 10px;
}
Have a look here for the complete code ;)
Follow this if you don't know Flexbox, might seems daunting at first, but when it clicks in your head it will change your life :) Complete guide to Flexbox