CODEWITHSUNDEEP
htmlcss
Julian A.
Julian A.

Reputation: 39

How do I get rid of a margin in CSS so my sections fit

heres what I put 

section {
    width: 40%;
}

I am making a website that has 2 columns, a column with a facts sections about the website on the right side of the page and the sign up sheet on the left side of the page next to it.

I put width: 40; to make the right side smaller but it makes a margin on the right side and I can't get rid of it to but the sign in sheet there.

Upvotes: 3

Views: 110

Answers (5)

Himanshu Vaghela
Himanshu Vaghela

Reputation: 1119

Add this shorthand property in your css in starting. 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {  margin: 0;  padding: 0;     border: 0;  font-size: 100%;    font: inherit;  vertical-align: baseline; }

and also add *{margin:0;padding:0;}

Its give same output in all browser. Also its clear all extra space,margin and padding.

For more reference Go to here:

reset.css

normalize.css

Upvotes: 0

Justin C
Justin C

Reputation: 316

In general, I prefer to get rid of the body margins altogether, then us ID codes to change individual element margins. Use this in your CSS:

body  {
margin: 0;

It should clear the elements and sub-elements of margins, and then you can come back and individually add margins if you need them. :)

Upvotes: 0

Ant
Ant

Reputation: 15

What you're asking seems vague, but if you just want to split your page, then this should work in your CSS:

.left
{
  float: left;
  background-color: #0e83cd;
  width: 40%;
  height: 50em;
}
.right
{
  float: right;
  width: 60%;
  height:50em;
  background-color: #9e83cd;
}

Creates This: Image Hope that helps.

Upvotes: 0

Sri
Sri

Reputation: 174

try this

section {
  width: 40%;
  position:absolute;
  left:10px;
}

Upvotes: 1

Leon Gaban
Leon Gaban

Reputation: 39018

Could you post an example on a site like https://jsfiddle.net/ or http://codepen.io/?

But to quickly answer your question, to get rid of margins just do this:

margin: 0, if that doesn't work then try margin: 0 !important.

I would do something like

.sign-up-section,
.facts-section {
    float: left;
    margin: 0;
    height: auto;
}

.sign-up-section {
    width: 60%;
}    

.facts-section {
    width: 40%;
}

Upvotes: 5

Related Questions