i have three divs outside my contentplaceholder
masterpage code:
<div id="content-outer" class="clear">
<div id="content-wrapper">
<div id="content">
<asp:ContentPlaceHolder ID = "ContentPlaceHolder1" runat="server" >
</asp:ContentPlaceHolder>
</div>
</div>
</div>
the width of content outer div is 1400px,it works well in the screen whose width is 1400 or more but when i run it in the scree of width 1024, the whole page starts from left,,,i want to center align my page when open in the browser,i have given some css properties like
content-outer:
margin-left:auto;
margin-right:auto;(not working)
but i m not able to center align my whole page,,,plz tell me how can i do that,,i have also given the same properties for body but again no luck
Firstly, the use of the center tag has been deprecated, so you shouldn't use it.
<center>
Your content here
</center>
Your solution of (I've put the css inline for clarity)
<div style="width: 1400px; margin: 0 auto;">
Your content here
</div>
Is the correct method of centering content on a page.
As you have noticed, if the screen is smaller than your content width, it doesn't appear to be centered. This is because there is no space for a margin on the left or right of the page and it would be inconsistent to start the browser scrollbar in the middle of the page.
Your options are:
Live with it - it's how all center-aligned websites work
Reduce the width of your website to work on smaller screens (it will then have a larger margin on larger screens)
Make your design more fluid - like the example below
Hope this helps.
<div style="width: auto; margin: 0 10%;">
Your content here
</div>
just playaround with following styles
<body>
<div id="divMain">
...
</div>
</body>
body
{
margin: 0;
padding: 0;
text-align: center;
}
#divMain
{
margin: 0 auto;
padding: 0;
width: 1024px;
text-align: left;
}
or
.divMain
{
position: absolute;
left: 10%;
width: 80%;
}
Related
I made this simple pen to explain my problem
https://codepen.io/yonatanmk/pen/VdwGvG
When I place 2 images next to each other with width 50% of the parent they always wind up too wide to be placed side by side and end up stacked on top of each other like block elements.
Why does this happen?
How can I place the 2 images side by side while occupying the full width of the parent div without any space in between them. Having a width of 49% allows the images to be placed side by side but now there's a space between them.
display : inline-block does not seem to help.
Thank you
My code
html
<div>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
<div>
css
div {
width: 500px;
}
img {
width: 50%;
}
This results in
With the code sample you provided, you can float the images and this will place them side by side with no margin.
img {
width: 50%;
float: left;
}
This is possible with the Classattribute which will specify the class name for the HTML element.
Your HTML code will look like this
<div class="row">
<div class="column">
<img src=http://www.planwallpaper.com/static/images/kitty-cat.jpg alt="planwallpaper" style="width:100%">
</div>
<div class="column">
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg"alt="Forest" style="width:100%">
</div>
And use the following code for the CSS
.column {
float: left;
width: 33.33%;
padding: 5px;
}
This will clear floats after image containers
.row::after {
content: "";
clear: both;
display: table;
}
I'm trying to cut off the bottom of a image so the next row of images an fit. I've tried to trim the bottom but it hasn't worked. I want to bottom edge to be in line with the image next to it.
Here is the current page: My Page
img.left {
padding: 0 12px 0 0;
height: auto;
float: left;
width: 33.33%;
}`
What it currently looks like
You could put the images into a div and control the size of that div with height, width and overflow attributes in css. A bit like this;
<div class="control" style="height: 600px;overflow: hidden; width: 100%;">
<img class="big" src="images/35473299826_50c6ced1ec_k.jpg" alt="boy
with ferry">
<img class="right" src="images/34628953174_408fac96c3_z.jpg"
alt="flowers">
<img class="left" src="images/34702862403_ddf655f873_z.jpg" alt="One of
my pictures">
</div>
The output looks like this for me; enter image description here
Below I have some HTML code. Everything is positioned relative apart from contentRow which is positioned absolutely. This is making the footer stick to where the browser window ends and not where the scroll bar ends.
Is there any way I can make the footer go down to the very bottom where the scroll bar ends.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative">
<div class="globalHeader">
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute">
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative">
</div>
</div>
Theres a few available flavours of the solution for this but they basically go something like this.
EXAMPLE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
a point to remember is that height of elements in html are always passed through the parent. so if you dont define height 100% on a parent the child won't know either. Good luck and let me know if you have any other issues :)
SOURCE
http://mystrd.at/modern-clean-css-sticky-footer/
If I'm understanding correctly, you could make s4-bodyContainer position:relative so that the contentRow is only positioned absolutely within that container. Then footer would go below the bodyContainer.
I'm trying to build a website with 4 columns of images spanning across the whole page. When users re-size the browser, i want those images to re-size as well, proportionality of course. My problem is, i could get those images to re-size properly if the window is smaller than the max width size for the images. However, if the browser is larger, there are big gaps in between the column. I want the images to stack right against each other with no gap in between. Any idea? My alternative solution is if the browser is larger, i want the column of images, still stack right against each other, to be place in the middle of the page. I couldn't figure out how to do that.
Codes are below.
HTML:
<body background="Images/BG_paper_008_dark.jpg">
<div id="header">
<div id="logo"><img src="Images/DTP_logo_final_white.gif" /></div>
<div id="menu">Wedding | Engagement | Family/Portrait | Products | Action | The world through my eyes </div>
</div>
<div id="midbody">
<div id="mainImg1"><img src="Images/FrontPage_L1_Image1.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image2.jpg" alt="Horse racing"/></div>
<div id="mainImg2"><img src="Images/FrontPage_L1_Image3.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image4.jpg" alt="Horse racing"/> </div>
<div id="mainImg3"><img src="Images/FrontPage_L1_Image5.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image6.jpg" alt="Horse racing"/></div>
<div id="mainImg4"><img src="Images/FrontPage_L1_Image7.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image8.jpg" alt="Horse racing"/></div>
</div>
</body>
CSS
#midbody {
clear: both;
width: 100%;
text-align: center;
}
#mainImg1 {
width: 25%;
clear: left;
float: left;
text-align: center;
}
#mainImg2 {
width: 25%;
float: left;
text-align: center;
}
#mainImg3 {
width: 25%;
float: left;
text-align: center;
}
#mainImg4 {
width: 25%;
clear: right;
float: left;
text-align: center;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Any reason why you can't set the img class to width:100% instead of using a max width?
I'm guessing you don't want the images to scale larger than their 'intrinsic' widths?
If you know the maximum widths of the images you could add a containing DIV within "midbody" which is 100% wide(inherited from midbody) but, has a max-width of the total max-width of the images within it:
...
If you don't know the total maximum width of the images than I think you will have to use javascript or PHP or something like that because you won't be able to get a DIV to inherit a max-width.
I am trying to create a CSS-based layout that has:
- A dynamically sized banner.
- A content area that should use all available space.
- A footer that aligns against the bottom of the page.
Currently, I have this. However, my challenge is working in the content area. Within the content area, I need to show:
- A dynamically sized header.
- A content area that uses all available space.
- A footer that aligns at the bottom of the content area, but above the footer mentioned above.
Altogether, I want to create a screen that looks like this:
+------------------------------------+
| Banner |
| |
|------------------------------------|
| Header |
|------------------------------------|
| Some Content |
| This needs to be dynamically sized |
| to fill all remaining content |
|-------------------------------------
| Toolbar |
|------------------------------------|
| Footer |
+------------------------------------+
Currently, I have the following
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
html, body{
height: 100%;
overflow: hidden;
}
body {
padding: 0;
margin: 0;
font-size: .85em;
font-family: Arial, Verdana;
color: #232323;
background-color: #fff;
}
</style>
</head>
<body>
<div id="banner" style="width:100%; background-color:Black; color:White;">[Banner]</div>
<div id="content" style="width:100%; height:100%; background-color:Gray; margin:0px 8px 0px 8px;">
<h2>Header</h2>
<div id="contentArea">
<div id="mainContent" style="background-color:Silver;">The main content goes here.</div>
</div>
<div id="toolbar" style="padding:8px 0px 8px 8px;">
<input type="button" id="refreshButton" value="Refresh" />
<input type="button" id="addButton" value="Add" />
</div>
</div>
<div id="statusBar" style="background-color:black; color:White; width:100%; position:fixed; bottom:0;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td style="width:33%;">Info</td>
<td style="text-align:center; width:34%;">Message</td>
<td style="text-align:right; width:33%;">Miscellaneous</td>
</tr>
</table>
</div>
</body>
</html>
This screen does not render as desired though. From what I can tell, when I set the "content" div height to 100%, it means 100% of the entire screen. In addition, I can't seem to get the "contentArea" div to take up the remaining space, nor can I get the toolbar to be aligned to the bottom. What am I doing wrong? How do I accomplish this?
This "sticky footer" technique should help with your footer problems. It will make it stick to the bottom, but will not overlap content like a position:absolute will if the page scrolls.
http://ryanfait.com/sticky-footer/
I believe you are asking how to make a side bar and the content section of a webpage appear to be equal in height without concern for the actual height of the content in either of the aforementioned div sections. If this is true, I believe I have what I perceive to be an easy answer to your dilemma.
Using HTML 5 and CSS 3, this is my proposal.
Starting with the CSS:
body{/*enter in your parameters */ }
.container{/*this div surrounds all the other divs and allows you to give percentage based widths in subsequent divs*/ max-width: 1000px; min-width: 760px; maergin: 0, auto, 0, auto; background-color: #000;}
.extraheight{float: left; width: 100%; height: 100%; background-color: #ccc;}
.header{width: 100%; color: #FFF; background-color: #00f; /*just for demo purposes*/ }
.sidebar{float: left; width: 30%; background-color: #ccc; /*match the background of the extraheight div*/ }
.content{float: left; width: 70%; background-color: #ccc; /*matches extraheight and siderbar colors */ }
.footer{color: #FFF; /* must make sure you clear the floats above */ position: relative; /* IE6 to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ }
Some basic HTML Using the above CSS to illustrate how it works:
<div class="container">
<div class="extraheight">
<div class="header"><h1>THIS IS MY WEBSITE</h1></div>
<div class="sidebar">
<p>This where you put your feed or whatever sidebar content you desire</p>
</div><!-- ENDS SIDEBAR -->
<div class="content">
<h2>This is where you place your content</h2>
<p>My site is the product of my effort and desire to provide each user with an enjoyable visit. We strive to exceed expectation without comprimising any needs. Check back often as our content is constantly changing.</p>
</div><!-- ENDS CONTENT -->
</div><!-- ENDS EXTRAHEIGHT -->
<div class="footer"><p>Put your footer content here</p></div>
</div><!-- ENDS CONTAINER -->
I don't have enough points yet to provide you with screenshots of how the page displays but I encourage you to give it a try. Most important issue to is to either make the extraheight div the background you want for the sidebar and content divs while making the background transparent in those divs or to make the sidebar and content divs the same background as the extraheight div. The latter being very easy when a solid color is used as the background but the former is necessary with a background that is any but extremely basic.
I hope this provided you with at least a portion of the information you were interested in when you posted. I am still trying to learn how to properly interpret the questions asked by our colleagues that post to this forum. Alas, I am new to this forum, but a quick learner!
Best wishes and success,
Steve K