The code below is from W3CSchool example:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:80%;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
You can copy the code and paste it to the editor below:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
I have already specified the width of "menu" to 20% and "content" to 80%, why at the right side of "content" has a blank area?
It will only align properly if I add "float:left" in the css style of "content". I can't understand why it behave like that. Anyone can explain?
Thanks for help.
This is because the width of the container for menu and content is set to 500px.
Set it to 100% if you want it to take the whole page:
<div id="container" style="width:100%">
Also if you want the content to simply take all the remaining space, don't assign it a width:
<div id="content" style="background-color:#EEEEEE; height:200px">Content goes here</div>
Here's the full working code:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:100%">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
There is blank area at right of page because your floating div is overlapping your content div because floating divs always float above the other divs (Try removing background-color of menu to see example). When you apply float right/left to your content div, it also floats with menu div hence occupies all the space.
please refer to This site
for more information on float.
Thank you,
DIVs are block elements. This means that 2 DIVs are displayed one bellow another, if not use float , position:absolute;, or inline.
if you use 'float' style express this div present external for 'inline' and present inside for 'block',and will affect the back of the element. so if content right display you can use 'float:left;width:80%' and 'float:left;width:80%'. In fact, this is 'display:inline-block', but according to my experience, it will produce the browser bug.
Related
I am trying to add space between elements <header> and section <section> but they are stuck to each other, such that when I apply margin to the bottom of the the top element or at the top of the bottom element, the top element moves down along with the bottom element, this only happened after I added the footer.
And I did a search but I was not able to find solution for this.
Thanks to All..
.hclass {margin-bottom:20;} // header - the top most part, need space below this
.tryi {margin:top;} //section the second part, need space above this
#divfootr {width:100%;height:auto;position:absolute;bottom:0;text-align:center;} // footer code
<header class="hclass">
<nav id="indxpg">
<div class="mainnav">
</div>
</nav>
</header>
<section class="tryi">
<div id="logotable">
</div>
</section>
<footer class="footer">
<div id="divfootr">
<p><span class="copyright"><strong>© 2016</strong></span></p>
</div>
</footer>
Your way to add margin is incorrect. It must be something like this (for a fixed margin) :
margin-top:20px;
Your missing px.
.hclass{margin-top:20px}
Basically I'm trying to create a simple webpage template which would contain 3 rows. The first being the header which contains two columns, the second just being the mainbody and then the last being a footer.
Coding wise i'm doing this kind of layout
<div id="wrapper">
<div id="header">
<header>
</header>
<div id="col2>
</div>
</div>
<div="mainbody"></div>
<footer></footer>
Basically the trouble I'm having now is in regards to the first row with the two columns. Basically I have a picture in the first one and a bunch of buttons on the second one. Ideally what I would like is to have the header at 100% width so it fits the screen and the contents of the first column stick to the left and the buttons to the right. With the blank space left inbetween the two. So the contents stick to the sides so to speak.
At the moment I'm using float:left on CSS for the first column, I've been messing around with float/align/position but I can't seem to get anything to work.
So any advice on that I would appreciate it.
I also had another question in regards to the footer, basically I have no idea how to even go about doing it. So just asking if possible and guidance where to look.
So for the footer I was wondering if it would be possible for it, if in between the footer and the browser x-axis there's white space it fits to the screen and the body would strech. Because as of now my body is only at the height of the contents within. So basically general advice on CSS to help implement the style so it fits to the screen.
Header with 2 columns
<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>
Now add desired margin-left to second column div. It will create space in between 2 columns
<div id="wrapper">
<header>
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</header>
<div class="mainbody">
Content
</div>
<footer></footer>
Use this
It is simple structure that can be created as follows (Here is DEMO)
HTML is
<div id="wrapper">
<div id="header">
<header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
</header>
<div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
</div>
</div>
<div="mainbody">mainbody
</div>
<footer></footer>
</div>
And CSS will be
#header{overflow:auto}
header{float:left}
#col2{float:right}
Hope it will help you :)
How can I get the content div to get at the bottom instead of that odd position?
http://jsfiddle.net/madprops/6FFXL/1/
<div>
<div style='float:left'>name </div>
<div style='float:left'>date </div>
<div style='float:left'>comments </div>
</div>
<div id="contenido" style="font-size:20px;">content</div>
EDIT: removed float:top
It is at the bottom for me in your example, (FF5), but you should probably make it safe by setting content to clear your floated divs, like this:
<div id="contenido" style="font-size:20px;clear:both;">content</div>
Also, the float:top on your first div is invalid, there is no top property of float.
I am using JQGrid within an ASP .NET MVC application. The grid itself is working great. However, the header height of the grid (or first grid on the page) is growing to match the height of my left navigation menu. Here is most of the Site.Master layout that I have. I just don't see why this is happening.
<div class="page">
<div>
<div id="left">
<div id="leftnavmenu">
<%= Html.MvcSiteMap().Menu("MvcSiteMapProvider", "activenav")%>
</div>
<div id="leftnav-msg">
Message goes here
</div>
</div>
<div id="main">
<div id="mainsitename">
<div id="mainsitenameimage"></div>
<div id="mainsitename1">Intake Tool</div>
</div>
<div id="mainpagetitle">
<%--<%=Html.MvcSiteMap().SiteMapPath(" > ") %>--%>
<asp:ContentPlaceHolder ID="PageTitle" runat="server" />
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="maintabledata">
<asp:ContentPlaceHolder ID="TableContent" runat="server" />
</div>
<div id="footer"></div>
</div>
</div>
</div>
I assume that #left has a float:left style, while #main does not. This appears to be a bug with jqGrid. There's another post that deals with the exact same issue.
I have actually created a jsFiddle example that illustrates the problem.
In the other post Oleg suggests that you use float:left on both side-by-side <div>s, with another div with clear:both after them. This would not work in my case, because I want the right div to expand to the whole remaining width of the browser window. Floated <div>s must have explicit widths associated with them (if not, they take on the width of the widest element inside them).
One work-around that worked for me is to set a height of the floated <div> to something small (1px) and set an explicit height for the content of that div. This is illustrated in the jsFiddle above.
I have a div that seems to not be wrapping its inner content
http://c5.dealercontrol.net/inventory/p1
the div id="container" has a black bg and should be wrapping the inner content how can I get it to show the style around all the inner content...
You need to put in a "clear" div or property in your html/css. The code you need is below and i have typed quick example as to where to place it.
<div style="clear:both"></div>
You would place this tag inside your container div, but after all of the inner contents.
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div style="clear:both"></div>
</div>
Hope it helps...
This may be unrelated, but it seems that <div id="sort-results"> is missing its closing tag.