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.
Related
I am working with Bootstrap.
The problem I have is that the height of my div are smaller than the space the elements inside the div take up.
My question is how to set the height of my about class so that it will be long enough to include all the elements currently in the div and change as I want to add new elements.
Here is my HTML
<div class="about container-fluid"><a name="about"></a>
<div class="col-md-7 border">
<div class="row">
<p>My name is Stefan. I am a budding web developer/designer who likes to learn new things. Things I am somewhat compentent in:</p>
<ul>
<li>HTML/CSS</li>
<li>Bootstrap</li>
<li>jQuery</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<div class="col-md-5 border">
<h2>Coder</h2>
</div>
</div>
Here is my CSS.
I have my about height set to 20px so you know that it is there. Deleting that line just collapses it altogether.
body {
font-family: 'Shadows Into Light', cursive;
font-size:26px;
height:100%;
}
a {
text-decoration:none;
color:white;
}
.navbar {
background-color:#008e76;
}
.nav-tabs {
border-bottom:0px;
}
.about {
border:1px solid green;
margin-top:75px;
font-family: 'Architects Daughter', cursive;
height:20px;
}
p {
padding:5px;
}
.portfolio {
border:1px solid red;
height:200px;
}
.contact {
border:1px solid blue;
height:200px;
}
.border {
border:1px solid black;
}
Here is my CodePen.
http://codepen.io/stefankenyon/pen/ZOKjxV
Thanks
Delete the fixed height height: 20px; from the div:
.about {
border:1px solid green;
margin-top:75px;
font-family: 'Architects Daughter', cursive;
height:20px;
}
Change to:
.about {
border: 1px solid green;
margin-top: 75px;
font-family: 'Architects Daughter', cursive;
}
See this JSFiddle
I'm trying to get the pictures to get ".other-wrap" to vertically align with the picture on the left. I've tried adding a margin or a border but for some reason this pushes ".other-wrap" down and further out of alignment. Can anyone explain what's causing this behavior and what css I can add to ".other-wrap" to get it to align without changing the html structure.
fiddle
Html:
<div id="588970897807405-list" class="main">
<div id="588970897807405" class="main-wrap">
<div class="inner-wrap">
<div class="inner-name-wrap" style="font-size: 10pt;">
<div class="inner-name">header</div>
</div>
<div class="inner-img-wrap">
<img id="588970897807405-event-img" class="inner-img" src="http://nodogaboutit.files.wordpress.com/2012/10/j04310181.jpg">
</div>
<div class="formatted-footer-wrap" style="font-size: 10pt;">
<div class="footer">footer</div>
</div>
</div>
<div class="other-wrap">
<div class="other-inner">
<div class="other-img-wrap"><img class="other-img" width="120" height="120" src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"></div>
</div>
</div>
</div>
CSS:
.main .inner-img{
vertical-align:middle;
margin:auto;
display:block;
width:120px;
height:120px;
top:0px;
}
.other-wrap{
/*border:solid black 15px;*/
margin:15px;
}
.main .inner-name-wrap{
white-space:nowrap;
width:150px;
font-size:14px;
text-overflow:ellipsis;
font-weight:normal;
display:block;
color:white;
background:black;
}
.main .formatted-footer-wrap{
color:white;
display:block;
font-size:10px;
width:150px;
background:black;
}
.main .other-wrap{
display:inline-block;
font-size:12px;
}
.main .formatted-time-wrap{
display:none;
font-size:10px;
}
.inner-wrap{
display:inline-block;
border:solid hsl(0, 100%, 100%) 1px;
}
It seems you need vertical-align.
Try vertical-align: middle:
.main-wrap{
font-size: 0; /* To fix extra space due to whitespaces in HTML */
}
.other-wrap, .inner-wrap{
display:inline-block;
vertical-align: middle;
margin: 15px;
}
Demo
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
I am trying to add a title which will show much like a banner for that dive with text in. like the below image.
The problem is I need to set the title text in css.
I have a single div with the content in thats it. I cannot change the HTML code to add things.
Any ideas?
You could do that with before pseudo-element, something like this :
.your_div:before {
content: "Your DIV title";
display: block;
color: #000;
background: #CCC;
text-align: center;
}
But it won't be compatible with old browsers.
div div{
background-color:brown;
border:1px solid white;
text-align:center;
}
.title{
height:40px;
padding-bottom:30px;
background-color:whitesmoke !important;
text-align:center;
}
.main{
border-radius:10px;
border:2px solid red;
box-shadow:0px 1px 5px 2px black;
height:content-width;
}
<!Doctype html>
<html>
<body>
<div class="main">
<div class="title">
<h2>my title</h2>
</div>
<div><p>first div</p>
</div>
<div><p>second div</p>
</div>
</div>
</body>
</html>
I want to center the three divs that appear in the mockup below (all have "float:left").
Is this possible?
I don't mind having wrapper-divs.
Text-align:center and display:inline-block won't work with the code I have.
If you want to center them, you can't float them. A better alternative would be to make them all display: inline-block so you can still stylize them as a block element, and they'll still pay attention to your text-align: center on the parent wrapper. This would appear to be a good solution for the limited example you've provided.
In order to account for browser compatibility, you'd need to change them to <span> rather than <div> before adding the display: inline-block on to them. This would be supported in everything IE7 and up, and all other modern browsers. IE6 would not be supported, but it's only widely used in China anymore.
div#wrapper {
width:960px;
margin: 0 auto;
}
http://jsfiddle.net/WyxHQ/1/
edit:
Moved complete code from fiddle to answer as per suggestion
<div id="outer-wrapper">
<div id="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
HTML
div#outer-wrapper{
border:2px solid black;
padding:10px;
width:100%;
}
CSS
div#wrapper{
width:99px;
margin:0 auto;
}
div {
width:33px;
height:20px;
}
div.one{
background:red;
float:left;
}
div.two{
background:blue;
float:left;
}
div.three{
background:green;
float:left;
}
You can also use a list and get the same results:
CSS:
.wrap
{
border:2px solid black;
width:100%;
}
ul
{
width:99px;
margin:0 auto;
height: 20px;
}
ul li
{
width:33px;
height:20px;
float: left;
margin: 0px;
padding: 0px;
}
ul li.red
{
background-color: red;
}
ul li.blue
{
background-color: blue;
}
ul li.green
{
background-color: green;
}
HTML:
<div class="wrap">
<ul>
<li class="red"> </li>
<li class="blue"></li>
<li class="green"></li>
</ul>
</div>
Try this: http://jsfiddle.net/nvpXx/3/
You can wrap your floated divs with an inline-block element and center it within its parent.
HTML
<div id="main">
<div class="wrap">
<div class="item">thing 1</div>
<div class="item">thing 2</div>
<div class="item">thing 3</div>
<div class="clear"></div>
</div>
</div>
CSS
#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;}
#main .item {float: left; border: 1px solid #ccc; margin: 5px; }
.clear {clear: both;}
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}
Potential Pitfall
This doesn't work well if you have so many floated items that they wrap to a second line. At that point, the div.wrap expands to 100% of its container and as a result everything is off-center.
Try this one, keep it simple:
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
<style>
ul{margin:0 auto;max-width:500px}
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%}
</style>
This will make it responsive although it breaks on some point, it helps to create a media query for the max-width:
<style>
#media screen and (max-width:520px){ ul li{float:none} }
</style>
Fiddle here
Floats, as the name suggests, are completely independent of their containers. So, you cannot center them according to a container, because they will know no container.
Hope this helps:
<body>
<div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto">
<div style="width:100px; border:#333333 1px solid; float:left;">div A</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div B</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div C</div>
</div>
</body>
What I would do is add a container div for them.
Then add overflow:auto so that the container div wraps around the 3 divs and then set the container div in the center with margin:0 auto.