Sorry for the incredibly stupid question, I feel like in most circumstances I could do this easily, but I'm using sharepoint at the moment and trying to do anything in this is hell!
Basically I have a side navigation (.menu-vertical) that is 230px wide, and a div next to it (.mainContent) that I would like to (padding aside!) fill the rest of the screen.
Unfortunately there are around 798 randomly placed divs, spans and whatever else in the code too that I can't seem to strip without breaking the site, so any advice on exactly how to achieve this would be much appreciated, thank you!
Basically I have a side navigation (.menu-vertical) that is 230px
wide, and a div next to it (.mainContent) that I would like to
(padding aside!) fill the rest of the screen.
..
the basis of the site is in place with a .container div, and the
.menu-vertical (fixed) and .mainContent (fluid, 100%) divs inside.
From what I understand, you're looking for this: http://jsfiddle.net/thirtydot/wv42t/
CSS:
.container {
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
padding: 30px;
border: 2px solid #00f
}
HTML:
<div class="container">
<div class="menu-vertical">menu-vertical</div>
<div class="mainContent">mainContent</div>
</div>
Related
New to the site and fairly new to coding as a whole, but wanting to learn as well.
Basically what im trying to do is essentially make this border grey where the grey box is, and blue for the rest of it. I've tried googling it but struggling to find something that describes exactly what im looking for.
The grey area is 200px wide and starts roughly 26px in from the left side of the page.
Can anyone help at all? Thanks in advance
Border Image
Header code is here - the grey box is part of a logo image.
<div class="fusion-header" style="height: 91px; overflow: visible;">
<div class="fusion-row">
<div class="fusion-logo" data-margin-top="5px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px">
You can override a parent border in the logo element, by using a negative bottom margin with the size of the border.
.header {
background: #515151;
border: 5px solid #5EDBE7;
}
.logo {
width: 200px;
height: 50px;
margin: 50px auto;
background: #5D5D5D;
/* Override the container vorder */
border-bottom: 5px solid #999;
margin-bottom: -5px;
}
<div class="header">
<div class="logo"></div>
</div>
I've been working on website recently and have come across a major problem :http://jimbob.webatu.com/index.html(you'll need to see the coding on the webpage).I've set my website up so that there are two main columns but are centered into the middle.The id wrap is what centers everything together and the two columns float left or right:
#wrap {
width:750px;
margin:0 auto;
background-color:#6E6E6E;
border-left:3px solid #A9E2F3;
border-right:3px solid #A9E2F3;
}
#main {
float:left;
width:496px;
background:white;
border-top-right-radius:5px 5px;
border-bottom-right-radius:5px 5px;
}
#sidebar {
float:right;
width:250px;
} `
Recently though i tried to add a footer bar like with the navigation bar at the top. this has been set to stay in the warp overall by using "clear:both" and have been trying to make it avoid the "wrap" id altogether.However something has gone wrong and the div's that control the "wrap"and "secondborder" won't fully close. Also as you may see a gray bar has appeared behind and the "wrap"background won't apply(I've set the sidebar background to nothing so that the "wrap" background applies to it. This makes it look a bit neater).I cannot paste the required coding as there is too scattered and is too long(look at the page source on the webpage).
Can anyone provide a solution to the "wrap" background and the "footer" not centering? I have only been learning html and coding for the past 3 months so please forgive me if this is a stupid mistake I've made. The link again to my website where the problem is : http://jimbob.webatu.com/index.html
Add the overflow: hidden; to your #wrap as such
#wrap {
width: 750px;
margin: 0 auto;
background-color: #6E6E6E;
border-left: 3px solid #A9E2F3;
border-right: 3px solid #A9E2F3;
height: auto;
overflow: hidden;
}
In order for your #footer to act like a footer at the bottom of your page you will have to take it out of your #sidebar and place it after the closing for #sidebar. This should fix your problems.
To fix the #sidebar being cut off you need to float it left as opposed to right as suc,
#sidebar {
float: left;
width: 250px;
}
Hopefully this helps.
Generally speaking you need to clear after your floating div's. This tells the browser to stop the floating for the next element. Looking at your HTML I'd add before the <div id="footer"> <br style="clear:both" />
Also, before you close #wrap add another <br style="clear:both" />
I just added a new div to your secondborder element: <div style="clear:both"></div> that sorted the problem. You were floating and not clearing the sidebar or the main div.
I have a CSS element, with a border around it, that could have one or multiple boxes in it, so the width of the entire div changes depending on how many boxes are present inside of it. However, I want this whole div to be centered on the screen.
Usually, to center things, I just use:
margin-left: auto;
margin-right: auto;
But, this time, I have to either float the element or make it inline-block so the size of the div will be resized to the content, and if I do that, the margin-left and margin-right auto does not work, it always just stays on the left side of the screen.
Currently I have:
#boxContainer {
display:inline-block;
clear:both;
border:thick dotted #060;
margin: 0px auto 10px auto;
}
I also tried with float: left instead of display: inline-block.
Does anyone know of a good way to both center a div and allow it to be resized to content simultaneously? Any help would be greatly appreciated.
Have you tried keeping it inline-block, and putting it inside a block-level element that’s set to text-align: center?
E.g.
HTML
<div id="boxContainerContainer">
<div id="boxContainer">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</div>
CSS
#boxContainerContainer {
background: #fdd;
text-align: center;
}
#boxContainer {
display:inline-block;
border:thick dotted #060;
margin: 0px auto 10px auto;
text-align: left;
}
#box1,
#box2,
#box3 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
}
Seems to work as you describe: http://jsfiddle.net/pauldwaite/pYaKB/
Unfortunately, this cannot be achieved through CSS solely I don't think. You could always use JavaScript to center the div once you know its width (i.e. after the boxes have been appended) for example:
$(document).ready(function() {
var itemWidth = $('#boxContainer').width();
var availWidth = $(screen).width();
var difference = availWidth - itemWidth;
$('#boxContainer').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});
I have a containing div that is NOT restricting the width of its child divs. The divs are stretching all the way to the full width of the screen, when i have a set width on both the container and the child. Why is this happening. I do NOT have any positioning or floating going on.
Please view my HTML:
<ul class="tabs_commentArea">
<li class="">Starstream</li>
<li class="">Comments</li>
</ul>
<div id="paneWrap">
<div class="panes_comments">
<div class="comments">member pane 1</div>
<div class="comments">member pane 2</div>
<div class="comments">member pane 3</div>
</div>
My CSS, the relevant parts of it at least:
#MembersColumnContainer {
width: 590px;
float: left;
padding-right: 0px;
clear: none;
padding-bottom: 20px;
padding-left: 2px;
}
ul.tabs_commentArea {
list-style:none;
margin-top: 2px !important;
padding:0;
border-bottom:0px solid #666;
height:30px;
}
ul.tabs_commentArea li {
text-indent:0;
margin: !important;
list-style-image:none !important;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
float: right;
}
#paneWrap {
border: solid 3px #000000;
}
.panes_comments div {
display: ;
padding: px px;
/*border:medium solid #000000;*/
height:150px;
width: 588px;
background-color: #FFFF99;
}
You could set max-width on either, or both, of the div elements to prevent their expansion:
#containerDiv {
min-width: 400px; /* prevents the div being squashed by an 'extreme' page-resize */
width: 50%; /* defines the normal width of the div */
max-width: 700px; /* prevents the div expanding beyond 700px */
}
It might also be that you're allowing the div's overflowed contents to be visible, as opposed to hidden (or auto). But without specific examples of your mark-up and css it's very difficult to guess.
Generally giving elements layout is pretty straight forward (always assuming you have a good understanding of floating, positioning and the box model), and in most cases you wouldn't have to use max- min-width to control elements on the page.
My two cents: If I was you, I'd start stripping out code (starting with the !important rule), and see when the problem is solved. De-constructing the code like that is a good way to find bugs.
Sorry I couldn't help, but I'm reluctant to give advice since the code you provided shows a lot of other stuff going on elsewhere that might be contributing to your problem (like having to use !important).
:D
I figured out the problem. The file that was calling in the css was conflicting with another external css file that had the same element with the same name in it. Thank you all for your help though.
I'm trying to build a profile page for a network...similar to Facebook profile page. I need the background the tabs are on to go under the profile photo on the left...so when the user updates their status it grows vertically underneath the photo..take a look at Facebook profile page. I've tried placing the status at the top "topStatus" with position: absolute; top: -51px; on the left column "profile_leftside" which works but when more apps are added to the left side it displays past the bottom border..doesn't stay contained in "pageContent".
Basically here's my layout...
<div id="pageContent">
<div id="topStatus">
<div id="innerStatus">
*STATUS AND TABS HERE // EXPANDS VERTICALLY WHEN STATUS IS UPDATED*
</div>
</div>
<div id="profileContent">
<div id="profile_leftside">
*LEFT SIDE APPS*
</div>
<div id="profile_rightside">
*TAB CONTENT*
</div>
</div>
</div>
CSS
#pageContent {
width: 799px;
min-height:600px;
text-align: left;
margin-left: auto;
margin-right: auto;
float:left;
border-left:1px solid #b3b3b3;
border-right:1px solid #b3b3b3;
border-bottom:1px solid #b3b3b3;
}
#topStatus {
background: #f7f7f7;
border-bottom:1px solid #DDDDDD;
width: 100%;
}
#innerStatus {
padding: 10px 10px 0px 225px;
}
#profileContent {
padding: 8px 0px 8px 10px;
}
#profile_leftside {
float: left;
width: 200px;
position: absolute;
top: 51px;
}
#profile_rightside {
float: right;
width: 580px;
}
Just trying to get "profile_leftside" at the top left without breaking the content at the bottom. Maybe theres a better way to lay this out?
Thanks!
I've always found CSS frameworks to be very helpful. Many of them have been proven again and again, and it takes abstracts you up a layer above having to worry about specific CSS layout problems.
I've used Blueprint CSS for many things, but have also heard good things of the 960 Grid system.
Blueprint CSS: http://www.blueprintcss.org/
960 Grid System: http://960.gs/
Regards,
Chris
It's easier to add any CSS problems to JSFIDDLE.NET so other people can look at the problem directly. I've added it for you and come up with a solution that I think you were looking for: http://jsfiddle.net/SqxN7/12/
The top bar now expands with the left Apps. I had to reorganize the placement of the div's and add 'overflow: auto' to the top status bar to allow it to expand as the app bar is a float.