I've come across a bit of an issue and was hoping for some advice.
I've always been a bit on-off with laying out websites like this but it's come to the day where I've had enough of fending it off.
So I have two divs, left and center, both are set to float:left; These are both in a "main" section but because the two are floating, the "main" section is smaller in height than these two which overlap due to the floating quality.
I've tried display:inline & display:inline-block but the first stacks them one on top of the other whilst the latter completely loses me my CSS for the corresponding div.
Was hoping someone could help me, if so, it'd be greatly appreciated! Here's the code:
HTML:
<div id="main_container">
<aside id="left">
<p id="settings_header">
Account Settings
</p>
<hr>
<img id="profile_picture" src="#" />
<div id="settings_option">
<a href="#">
Settings
</a>
</div>
<div id="settings_option">
<a href="#">
Sign Out
</a>
</div>
</aside>
<div id="center">
<h2>
Latest & Greatest Topics
</h2>
</div>
</div>
CSS:
#main_container {
width:82%;
min-width:932px;
margin-left:auto;
margin-right:auto;
padding:10px 10px;
box-shadow:inset 0 0 10px #000;
background-color:#ccc;
}
#left {
width:26%;
min-width:176.4px;
margin-right:5px;
display:inline-block;
float:left;
background-color:#fff;
border:1px solid #222;
box-shadow:0 0 5px #000;
font-family: verdana;
font-size:12px;
color: #000;
}
#center {
width:68%;
min-width:670.6px;
margin-left:5px;
margin-right:5px;
display:inline-block;
float:left;
background-color:#fff;
border:1px solid #222;
box-shadow:0 0 5px #000;
font-family: verdana;
font-size:12px;
color: #333;
text-align:left;
}
#center h2 {
font-family:tahoma;
font-weight:bold;
font-size:18px;
text-decoration:underline;
text-align:center;
color:black;
letter-spacing:1px;
}
Thanks for any help in advance!
You just need to add this:
#main_container:after {
content: "";
display: block;
clear: both;
}
Try this one:
#main_container {
float:left;
}
See the result
add
overflow:hidden
to #main
Because you have set width on your container everything should be kept in the box
Related
I have the following alignment problem: I want the "random" div to have a full width in the window, that's why I added the "width:100%" command. But for some reason, the maximum width it displays the random div on is the width of the "fixedwidth" div, but the two are not connected. Why does the browser keep matching the maximum width of the two divs? If i increase the width of the "fixedwitdth" div, then the width of the "random div" also increases. But that does not make any sense.
<html>
<head>
<title>Gliga's BBC</title>
<style type="text/css">
body {
margin:0px;
font-family: arial,helvetica;
}
#topbar {
background-color:#7A0000;
width:100%;
height:40px;
color:white;
}
.fixedwidth {
width:1200px;
background-color:green;
margin:0 auto;
}
#logodiv {
padding-top:7px;
padding-bottom:3px;
padding-left:50px;
float:left;
border-right: 2px solid #990000;
padding-right:30px;
}
#signindiv {
font-weight:bold;
padding:9px 80px 11px 20px;
font-size:0.9 em;
float:left;
border-right: 2px solid #990000;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9 em;
border-right: 2px solid #990000;
height:100%;
padding:10px 20px 10px 20px;
float:left;
}
#searchdiv {
float:left;
padding:6px 10px 5px; 5px;
border-right: 2px solid #990000;
}
#searchdiv input{
height:20px;
}
.break {
clear: both;
}
.random {
background-color:blue;
margin-top:10px;
height:30px;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
Sign in
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPLayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search..." />
<div>
</div>
</div>
<div class="break" />
<div class="random">
</div>
</div>
</body>
</html>
.random is a child of .fixedwidth, so it's a totally normal behaviour happening there.
If you sort your code properly then you will get to see it clearly:
I'm currently developping a website and encountered a problem with CSS.
I have a parent div containing 2 or more children: one containing the name of a user that sits on top of the other children, and just below 1 or more side by side divs which display items owned by the user.
At the moment it works fine, but if the user's name (top div) is larger than the total width of the divs below, it will expand the parent div.
I'd like to only allow the bottom divs to expand the parent div and make the title div use the full parent div's width without being able to make it larger.
I created a fiddle about it: http://jsfiddle.net/mLxjL/2/
HTML:
<div class="matches">
<div class="match-container">
<div class="user-match-container">
<div class="match-owner user">You</div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Zeppelin of Consequence (Trading Card)</div>
</div>
</div> <span class="arrow">→</span>
<div class="user-match-container">
<div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
<div style="clear:both;"></div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Lost Hobo King</div>
</div>
</div>
</div>
</div>
CSS:
.match-container:before, .match-container:after {
content:"";
display:table;
}
.match-container:after {
clear:both;
}
.match-container {
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
padding:10px;
margin:10px;
float:left;
}
.match {
width:112px;
float:left;
margin: 0 2px;
}
.match .image-container {
width:112px;
height:130px;
display:block;
}
.match .item-name {
line-height:12px;
font-size:10px;
margin-top:4px;
text-align:center;
height:24px;
overflow:hidden;
clear:both;
}
.match-container .arrow {
float:left;
position:relative;
top:70px;
margin:5px;
}
.match-owner {
line-height:14px;
font-size:12px;
margin-top:4px;
text-align:center;
height:14px;
overflow:hidden;
margin-bottom:4px;
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
}
.match-owner.user {
background-color:green;
}
.match-owner.friend {
background-color:red;
}
.thumbnail-count {
position:relative;
top:-24px;
margin-bottom:-24px;
font-size:16px;
font-weight:bold;
border-top:1px solid white;
border-right:1px solid white;
border-top-right-radius: 7px;
font-size:18px;
background: rgb(160, 160, 160) transparent;
background: rgba(160, 160, 160, 0.70);
padding: 0 4px;
float:left;
}
.user-match-container {
float:left;
}
Is it possible to do this without using JavaScript?
You can use Absolute positioning
FIDDLE
position:absolute;
top:0;
left:0;
width:100%;
and on the container div :
padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;
If you add the following styles you should achieve what you want:
.user-match-container {
position: relative;
padding-top: 22px;
}
.match-owner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
top: 4px;
left: 0;
right: 0;
}
Example
I have this little bit of text on my page:
I need to place the month (DEC) on top of the year (2013). How can I do this with CSS?
Using BR, or floats, seems to lead to all kinds of crazy formatting problems. Obviously, as the date changes, so does the width, so I can't lock it into a fixed width.
What I have so far:
html
<span class='month'>DEC</span><span class='year'>2013</span>
css
margin-left:20px;
position:relative;
top:-12px;
padding:12px 20px;
font-size:18px;
text-align:right;
Check this one, DEMO http://jsfiddle.net/yeyene/VPZgV/2/
HTML
<div class="day">
<span class="date">31</span>
<div class="mth_yr">
<span class='month'>DEC</span>
<span class='year'>2013</span>
</div>
</div>
CSS
.day{
float:left;
padding:10px;
background:#F0EAE9;
font-family:Georgia, "Times New Roman", Times, serif;
}
.date{
float:left;
padding:8px 10px 2px 10px;
border-right:3px solid #fff;
font-size:30px;
font-weight:bold;
height:50px;
background:#E9A3A0;
color:#fff;
}
.mth_yr{
float:left;
width:35px;
height:50px;
padding:10px 10px 0px 10px;
background:#E9A3A0;
color:#fff;
}
I am trying to get div's to appear in the parent div code can be found below:
<div id="header">
<div class="header-left">
LOGO
</div>
<div class="header-right">
OPTIONS
</div>
</div>
#header
{
background-color:#FFFFFF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom:2px solid #C0C0C0;
border-left:2px solid #C0C0C0;
border-right:2px solid #C0C0C0;
color:#ff3427;
display:block;
font-family: "Book Antiqua", "Cambria", serif;
margin:auto;
width:980px;
position:relative;
}
.header-left
{
color:#ff3427;
display:block;
font-family: "Book Antiqua", "Cambria", serif;
font-size:32px;
float:left;
text-align:left;
width:320px;
position:static;
}
.header-right
{
color:#ff3427;
display:block;
font-family: "Book Antiqua", "Cambria", serif;
font-size:12px;
float:right;
text-align:right;
width:655px;
position:static;
}
You can find what it looks like currently at: http://mytvisfree.com
I want the two div classes to appear in the header div, but it isn't appearing, and I can't figure out why, any help would be appreciated.
You need to add a clear after your last div, because floated elements are removed from the normal page flow, so as a result, clears are needed. (See also: All About Floats and CSS positioning)
HTML code:
<div id="header">
<div class="header-left">
LOGO
</div>
<div class="header-right">
OPTIONS
</div>
<div class="clear"></div>
</div>
CSS additional code:
.clear {
clear: both;
}
Another way to show parent div
HTML code:
<div id="header">
<div class="header-left">LOGO</div>
<div class="header-right">OPTIONS</div>
</div>
CSS additional code:
#header { overflow:hidden; }
I know the above solutions work because I have had them in the past. But today, I had this situation where I just put position: relative on the inner div and it fixed the problem.
The problem I am running into is related to a footer I have absolutely positioned at the bottom of the page. Everything is fine until the copy on the page begins to extend further down the page which then causes my content wells to extend down, behind, the footer. Is there anyway I can force my content wells to 'push' the footer down the page?
Here is the relevant html:
<div id="page">
<div id="page_container">
<div id="header"></div>
<div id="nav"></div>
<div id="main_content">
<div id="left_column"></div>
<div id="right_column"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_container">
</div>
</div>
And the relevant CSS
#page {width:100%;margin:0 0 10px 0; text-align:center;}
#page_container {width:743px;height:auto !important;height:100%;margin:0 auto;min-height:100%;text-align:center;overflow:hidden;border:2px solid #000;}
#header {width:100%;background:url('../images/header.jpg');height:87px;clear:both; margin-top: -2px;}
#nav {width:100%;height:29px;float:left; text-align:left; border-bottom: solid 2px #000; border-top: solid 2px #000;}
#main_content {width:100%;float:left; text-align:left; background-color:#fff; border-bottom: solid 2px #000; border-left: solid 2px #000; border-right: solid 2px #000;}
#footer {width:100%; position:absolute;margin-top:10px; bottom: 0; background:url('../images/footer_bg.jpg');height:133px;text-align:center;}
#footer_container{width:746px;height:133px; text-align:left; display:inline-block;}
#left_column {width:230px; float:left; text-align:left; background-color:#fff; margin-top:5px;}
#right_column {width:490px; float:right; text-align:left; background-color:#fff;margin-top:5px; padding:10px;}
Thanks for any help you might be able to give!
Use position: fixed; for the footer, you also might want to have some padding-bottom for your body so that the content won't go under it.
Take out the height: 100% on pageContainer - that fixes the div to the window height and not the content height.
Try this:
<style type="text/css">
html, body { margin:0; padding:0; height:100%; }
#page_container { width:743px; margin:0 auto; }
#header { height:87px; border:1px solid #000; }
#footer { height:133px; position:absolute; bottom:0; width:100%; border:1px solid #000;}
#nav { height:29px; border:1px solid #000;}
#left_column { width:230px; float:left; border:1px solid #000;}
#right_column { width:490px; float:left; border:1px solid #000;}
#page { min-height:100%; position:relative; }
#main_content { padding-bottom:133px; }
.clear { clear:both; }
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
HTML (note - you must put #footer inside #page for this method to work):
<div id="page">
<div id="page_container">
<div id="header">hhhh</div>
<div id="nav">nav</div>
<div id="main_content">
<div id="left_column">lll</div>
<div id="right_column">rrr</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="footer_container">fffff</div>
</div>
</div>
You can preview working example here: http://www.front-end-developer.net/examples/bottomfooter/footer.htm
Tested on Chrome, Firefox, IE6, IE7, IE8 and Opera.