I have a ReactJS/MaterialUI webapp I'm building. I want to add space on the left and right side of my page (to look like any other page, including stack overflow). I don't know if the best practice is to add padding, or a margin. Then on mobile, I wouldn't want the space.
One idea I had was to add blank grid sections on the left and right side with breakpoints where they don't appear on mobile. I'm not sure what's considered the best approach here.
You can use max-width: 1200px and margin: 0px auth; on the element which wraps the entire page to achieve this.
The margin: 0px auto will add 0px margin top and bottom, and center the right and left margin.
<div className="page_wrpr">
.......
</div>
.page_wrpr {
max-width: 1200px;
margin:0px auto;
}
.container{ width: 900px; margin: 0 auto; }
The margin will give your container a top- and bottom-margin of 0. The auto-value that however much horizontal space remains after you've used up 900px, will be evenly split to add the whitespace on each side of the body.
Related
I need assistance finding the line of CSS I need to modify to increase the width of the main content container at smaller screen sizes. The problem I'm having is that in smaller screen widths the content does not extend to the width of the screen. Instead there is a pretty wide right hand margin. I would like to extend the content from the left side of the screen to the right to make better use of the screen space. Can someone tell me what line of code I need to change to fix this? Thank you!
The site is - https://www.shiftins.com
In styles.css, line 2982:
.content,
.content-sidebar-sidebar .content,
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 100%;
}
On line 1552:
.page.sidebar-content .entry {
padding: 40px 40px 40px 0;
}
Combined, these produce the effect you're seeing.
Changing the second rule to padding: 40px 0 40px 0; removes that large right padding but the form is still clipped. The form is contained in an iframe and is fixed at 500px wide. Based on the structure, I'm guessing the form is out of your control. Adding min-width:500px; to the second rule makes the page width wider than the screen, but prevents the clipping of the form.
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
Let's say I want to create an HTML page with one main div that holds all the content.
The div should hold other divs and be fixed in the center of the page like in the image.
How should I specify the width? In a % value or a value in px? What is the best practise?
And what should be the correct value?
Please sorry if this has been covered before....
Image is here:
EDIT
So much nice answers... Thank you all very much
It all depends on the content you will be presenting and what you want to do with it. You may choose to use a fixed width layout if there is no need for the content to expand, or if you want to keep the text/design constrained within the width of the DIV. Though, one thing you may want to consider is using a combination of percentage and fixed width. For example, you may choose for your DIV to be 95% of the page as long as the minimum width is not below 700px and the maximum width is not over 950px. The result of this is a DIV that will expand and contract within your specified constrains.
div#container {
width:95%;
max-width: 950px;
min-width: 700px;
margin: 0 auto 0 auto;
}
In my opinion you should use px
Cause the % will depend on the wide-screen of the user, so images could display bad
I can't see your image but you can do that with two divs using percentages.
HTML:
<div id="outer">
<div id="inner">Your centered div</div>
</div>
CSS:
#outer {
width: 100%;
}
#inner {
width: 50%; // whatever width you want - I can't see your image
margin: 0 auto;
}
To center the div simply put left and right margins to auto on css.
Regarding the % or px, it would REALLY depend on the layout you are willing to code. If your layout was made thinking in a fluid layout, then you should use % but add a max-width so it would not stretch past n px.
For example:
You layout was made for a 1024px screen using 960px grid. But it would be cool to let it stretch a bit for 1280px screen users. So you put width:100%; and after ir, max-width:1280px.
So any user with bigger screen will see the layout for a 1280px.
I will suggest to use body margin:0 and use container div with margin auto, and use pixel for content width and height.
<div class="container">
<!-- HTML Content here -->
</div>
.container{
margin-right: auto;
margin-left: auto;
}
Css float left and right control the flow of the div. if you want to place two divs, right and left, then use
.left-div {
float: left;
width:200px // use pixel to control width
margin-left: 5px;
}
.right-div {
float: right;
width:200px;
margin-right: 5px;
}
First: Holding that main div in center position can be done with margin-left: auto; margin-right: auto;.
Second:
I don't think, that there is a basic best practice, because the usability of variable with depends highly on the content itself.
One usable solution that covers both could be using fixed width depending on the device (desktop, table, phone) using media queries.
I have this stylesheet, but the right and left margins are too large (about 5 cm), I don't know how to reduce them. I'd like to have 3 cm right and left.
I tried to change page_width, but it did't work.
Thanks,
rubik
Okay, well number one your
div.document {
width: {{ page_width }}px;
margin: 0 auto;
}
is set to margin: 0 auto; which makes it centered so your page will be 940px and will be centered (Resizing your page will confirm this). You probably have to change your content width along with the wrapper width, but keep in mind that the amount of padding depends on how large your viewport is.
Alternate
If you just want to make it strictly 3cm on the left and right sides and make the content in the middle have a fluid layout you can do this:
margin: 0 3cm;
position: absolute;
width: auto;
All,
In a centred layout (960px width; margin: 0 auto;), I have two menu bars, one floated to the left & other to the right, underneath both of which I want to float an iframe.
Unfortunately, it does not appear to be floating. The iframe moves to the left most available space of the viewport. Unfortunately, I cannot use absolute positioning due to the layout being centred & having max. width of 960px.
Is there a way to make this happen please?
EDIT:
Further to the comments, for which Im grateful, here is the code.
HTML:
<iframe id="iframing" src="mannequin.html" width="640" height="500" frameborder="0" ></iframe><br />
CSS:
#container {
min-width: 960px;
height: 100%;
background: rgba(255,255,255,0.8);
margin: 0 auto;
position: relative;
} /* The is the main container on body */
#iframing {
float: left;
width: 640px;
height: 500px;
margin: 10px auto 10px;
clear: both;
}
HI all,
Its finally resolved, hurrah! I had set the width to min-width on the main container which was the reason of the iframe extending to the far end. Resolved. And thank you for helping with this. Cheers.
A centered layout and absolute positioning don´t exclude each other but I don´t think you need absolute positioning anyway.
As far as I can understand your question, the first thing I would do is add a clear:both to the iframe.
Does the iframe have a fixed with?
Take a look at this example, it should point you in the right direction: http://jsfiddle.net/WsyCb/
All you need to do to position the iframe within the centered layout is given the container a relative position and move the iframe left by the fixed width of the left content.
Additionally, as far the floats go, you might be able to fix this by selectively clearing the floats. I'm not sure of any other reason why the iframe wouldn't join the flow of the other floated elements. Try making the container overflow:auto.