Heyo, so I'm having a bit of hard time making aside and section to position correctly when making the screen smaller. What happens is the section drops below the aside when shrinking the screen. Here the pen: https://codepen.io/anon/pen/gxjbyg
Here's the code:
#container {
width:90%;
margin: 0 auto;
background:pink;
height:300px;
}
aside {
width:12%;
height:100px;
background:green;
border-radius:20px;
display:inline-block;
margin-right:20px;
}
section {
width:86%;
height:100px;
background:purple;
border-radius:20px;
display:inline-block;
}
Use width:calc(86% - 20px); one the section to take on consideration the margin-right that you used on aside which is 20px;
#container {
width:90%;
margin: 0 auto;
background:pink;
height:300px;
}
aside {
width:12%;
height:100px;
background:green;
border-radius:20px;
display:inline-block;
margin-right:20px;
}
section {
width:calc(86% - 20px);
height:100px;
background:purple;
border-radius:20px;
display:inline-block;
}
<div id="container">
<aside>ASIDE</aside>
<section>SECTION</section>
</div>
Here margin-right: 20px; of aside inturn causes the overall width to increase above 100%. Reduce this to margin-right: 15px; which will solve the issue.
Related
Hello I have a question about centering a frame div inside a parent div.
I would like to center the frame inside the page, which is 70% wide, but I just cant make it work. I woud like the frame to be inside the parent div WRAP and the WRAP div inside the MAINWRAPPER which is 70% wide.
Please help :)
html{
background-color:#EEE;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-size:16px;
color:#888;}
body{
position:absolute;
width:100%;
margin:0px;
padding:0px;
}
#MAINWRAPPER {
min-height:100%;
position:absolute;
right: 0;
left: 0;
margin:0 auto;
padding:0;
width:70%; /* page width */
background-color: #39f;
border:1px solid #959595;
}
#WRAP {
position:relative;
display:block;
margin:0 auto;
border:1px solid red;
}
.frame {
width:100%;
height:300px;
position:relative;
float:left;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
.frame a{
display:block;
width:100%;
height:100%;
color:#333;
}
.frame a:hover{
display:block;
color:#FFF;
}
.title {
display:block;
position:absolute;
overflow:hidden;
top:0;
background-color:#ccc;
padding:3px 0;
width:100%;
height:auto;
border-bottom:1px solid #959595;}
div.price {
display: block;
position: absolute;
bottom: 1px;
right: 0;
height: 1.6em;
width: 3em;
background-color: #33CCFF;
border-radius:5px;
border:2px solid #FFF;
color:#FFF;
font-size:1.2em;
font-weight:bold;
text-align:center;
}
<body>
<div id="MAINWRAPPER">
<div id="WRAP">
<div class="frame"><a href="#">
<object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>
</body>
Remove width and float from .frame and try like this: Demo
.frame {
height:300px;
position:relative;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
How to center a div inside a page container in your HTML page :-
Just add following bootstrap class to do this in your HTML page :-
text-center col-md-offset-2
Description :-
Here offset value is the margin from the left hand side so by increasing decreasing the value of the offset you can set the margin.
I built a page that has 3 divs all lined up inline.
It basically goes SIDEBAR | Main Page | SIDEBAR
Now I have all of these wrapped in one div, I have it set so it's responsive. Currently, when I decrease the width of the page, it puts the left sidebar on top, the mainpage in the middle, and the right sidebar below them. I'd like for everything to stay together and just have the Main Page shrink to a certain amount and then stop (and just stop the responsiveness). How do I achieve this?
JSFiddle: https://jsfiddle.net/mnyd4tx8/
Code:
HTML
</div>
<div class="middlepage">
</div>
<div class="sidebar">
</div>
</div>
CSS
.pagewrap {
width:80%;
max-width: 600px;
min-width:200px;
height:1200px;
border:1px solid green;
margin:0 auto;
text-align: center;
}
.middlepage {
background-color: red;
width:80%;
max-width:200px;
min-width:100px;
height:1000px;
padding:10px;
text-align:center;
margin:0 auto;
display:inline-block;
vertical-align: top;
}
.sidebar {
display:inline-block;
width:100px;
height:100%;
background-color:black;
}
You can achieve the desired result with:
.pagewrap {
width:80%;
max-width: 600px;
min-width:400px;
height:1200px;
border:1px solid green;
margin:0 auto;
text-align: center;
}
.middlepage {
background-color: red;
width:60%;
max-width:200px;
min-width:100px;
height:1000px;
padding:10px;
text-align:center;
margin:0 auto;
display:inline-block;
vertical-align: top;
}
.sidebar {
display:inline-block;
width:20%;
max-width:100px;
height:100%;
background-color:black;
}
Notice the width on .sidebar is now using a percentage along with a max-width. Also, I made the width percentage on .middlepage smaller so everything contained in .pagewrap adds up to 100%.
Now, admittedly this isn't a 100% responsive solution, but your question leads me to believe there are some width constraints on your content.
Updated JSFiddle: https://jsfiddle.net/mnyd4tx8/1/
.pagewrap {
width:80%;
height:1200px;
border:1px solid green;
margin:0 auto;
text-align: center;
}
.middlepage {
background-color: red;
width:50%;
height:1000px;
padding:10px;
text-align:center;
margin:0 auto;
display:inline-block;
vertical-align: top;
}
.sidebar {
display:inline-block;
width:100px;
height:100%;
background-color:black;
}
It will work till certain point beyond that it will break as usual. In that case, you need to handle with CSS media query.
I have this CSS Code:
.homeBoxes {
width: 49%;
display:inline;
float:left;
overflow-y:scroll;
min-height:300px;
max-height:350px;
margin-right:5px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
}
.title {
margin:0 auto 0 auto;
padding:2px;
font-size:20px;
background-color:#f36f25;
}
i want the title to be fixed within the .homeBoxes div and 100% (not displaying the scroll bar to the right of the title)
only to be fixed within the div and not on the whole page
http://jsfiddle.net/f3z3h/1/
Fiddle
Set overflow property.
.homeBoxes
{
width: 49%;
display:inline;
float:left;
overflow-y:scroll;
min-height:300px;
max-height:350px;
margin-right:5px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
overflow: hidden;
}
If you want scrolling to the content , specify overflow:auto or scroll.
You can do like this: DEMO
HTML:
<div class="homeBoxes_container">
<div class="title">Title</div>
<div class="homeBoxes">TEXT</div>
</div>
CSS:
.homeBoxes_container {
clear:both;
width: 49%;
min-height:300px;
max-height:350px;
}
.homeBoxes {
width:100%;
display:inline;
float:left;
overflow-y:scroll;
margin-right:5px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
min-height:300px;
max-height:350px;
}
I need a responsive two column footer. However, the thing doesnt turn out to be responsive.I've shown it in here.
http://jsfiddle.net/fVBaB/
The CSS code is here...
#leftf
{
width:46%;
display:block;
float:left;
margin-bottom:20px;
border: 1px solid grey;
padding:18px;
height:100px;
}
#rightf
{
height:100px;
padding:18px;
width:46%;
display:block;
float:right;
margin-bottom:20px;
border: 1px solid grey;
}
#bottomline
{
width:100%;
display:block;
bottom:0px;
}
It's because your mixing percentages and pixels in the width - you're also using block and not inline-block. Change your CSS to:
#leftf
{
width:46%;
display:inline-block;
float:left;
margin-bottom:20px;
padding:2%;
height:100px;
}
#rightf
{
height:100px;
padding:2%;
width:46%;
display:inline-block;
float:right;
margin-bottom:20px;
}
#bottomline
{
width:100%;
display:block;
bottom:0px;
}
I've also removed the border from #leftf and #rightf as this was adding a pixel each. Here's a demo http://jsfiddle.net/MY5VE/.
Hope this helps!
I have two menus floated to the left of a page.
I then have a div floated to the right with an auto height, that adjusts to the content on the page (results of the menu ).
In my example I will treat the ul's as divs since they are set to block elements anyway:
<body>
<div class="container">
<div class="div1_head"></div>
<div class="div1"></div>
<div class="div2_head"></div>
<div class="div2"></div>
<div class="div3_head"></div>
<div class="div3"></div>
</div>
</body>
Each of these elements has a separate div header that goes above them.
I cannot figure out the correct way (if there is one) to clear and float the divs, so that they will all be aligned in the correct row.
margin:0;
padding:0;
.container {
width:100%;
float:left;
height:500px;
background:#ebebeb;
}
.div1_head {
float:left;
background: #cfcfcf;
width:20%;
height:50px;
margin: 24px 0 0 0;
}
.div1 {
float:left;
background: #dedede;
width:20%;
height:200px;
clear:left
}
.div2_head {
float:left;
background: #cfcfcf;
width:20%;
height:50px;
clear:left;
margin: 24px 0 0 0;
}
.div2 {
float:left;
background: #dedede;
width:20%;
height:200px;
clear:left
}
.div3_head {
float:right;
background: #cfcfcf;
width:76%;
height:50px;
clear:none;
margin: 0 0 0 4%;
}
.div3 {
float:right;
background: #dedede;
width:76%;
height:200px;
clear:none;
margin: 0 0 0 4%;
}
Do to the nature of the web application i'm using nesting the div and header into a larger container div isn't an option.
Here is a jsfiddle: http://jsfiddle.net/Kq49s/1/
Ok, if you don't want to add in new DIVs to your current app.
Try to change your div3's css like this...
Here is the demo on jsfiddle... http://jsfiddle.net/NTX6h/
.div3_head {
position:absolute;
top:24px; /* same as your .div1_head's margin top */
right:10px; /* if you want to add some right margin */
background: #cfcfcf;
width:76%;
height:50px;
}
.div3 {
position:absolute;
top:74px; /* .div3_head's margin top + .div3_head's height */
right:10px; /* if you want to add some right margin */
background: #dedede;
width:76%;
height:200px;
}