I am trying to get two divs to sit side by side within another div, however the first div won't show up in the container div. "contactleft" wont show up inside of "contactcont". I'm not sure if it has something to do with the display:block's or not? I tried clearing the "left" one too, no luck. Anyone know whats up? Thank you!
html:
<div id="contact">
<img src="Images/contactbanner.jpg" alt="contactbanner">
</div>
<div id="contactcont">
<div id="contleft">
</div>
</div>
CSS:
#contactleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
#contactcont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
You have what I assume is a typo in your code. Should work correctly with the following:
<div id="contactcont">
<div id="contactleft">
</div>
</div>
See jsfiddle
You have a typo at contleft in your CSS it should be :
#contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
Your HTML looks fine :
<div id="contactcont">
<div id="contleft">
inner content here
</div>
</div>
Here is the fiddle showing that.
You're actually pretty good there, I would just change your "contactLeft" to a class, and repeat "contactLeft" as many times as you need to. Here's a link to a CodePen.
Link to CodePen
Here's the HTML:
<div id="contactCont">
<p>contact Container</p>
<div class="contleft">
<p>contact Left</p>
</div>
<div class="contleft">
<p>contact Left</p>
</div>
</div>
And here's the CSS:
.contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
border: 1px solid black;
margin-left:1px;
}
#contactCont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
Note, that I changed your banner height to 20px and stretched the screen width.
Then I just copied your second "div" inside your container in the same hierarchy to add another side by side. I added 1px of margin-left, and 1px solid black borders to exaggerate the point.
You can also reference bootstrap for some responsive sizings if you're new to this until you get to understanding the CSS and HTML elements a little more.
Get BootStrap
Related
I had three divs inside a main div with id main_div and has css already as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>
I just want to insert three divs in the main div as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
So i want the div format to display the text like
breadcrumb_text dropdownlist Pagination
I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.
So can anyone let me know me know the css to place them in an horizontal line ?
This maybe help you Fiddle
#main_div > div {
width: 33%;
float: left;
}
I have modified your code little bit with spacing equally for each div and removed Position in the Main div.
Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.
#main_div{
height:10px; line-height:50px; margin-top:1px;
box-sizing:border-box;
}
#main_div > div{
width:31.1%;
float:left;
box-sizing:border-box;
border:1px solid grey;
margin-right: 10px;
display:inline-block;
}
#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
I think this is what you are asking for
JSFiddle
CSS
body
{
margin:0%;
}
.main_div
{
display:block;
margin:0% 5%;
width:90%;/*Just random, modify as per your requirement*/
height:300px; /*Just random, modify as per your requirement*/
background:#eee;
position:relatve;
}
.left-div, .center-div, .right-div
{
display:inline-block;
height:100%;
position:relative;
float:left;
width:33%;
border:1px solid #000;
text-align:center;
padding-top:5px;
}
HTML
<div class="main_div">
<div class="left-div">
Div One should be Left(breadcrumb_text)
</div>
<div class="center-div">
Div Two should be Center(dropdownlist)
</div>
<div class="right-div">
Div Three should be Right(Pagination)
</div>
</div>
I need some help, this is bothering me...
I have the following DIV structure:
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
</div>
And the following CSS code to style it:
body, html {
height:100%;
margin:0px;
padding:0px; }
#principal {
width:1000px;
height:100%;
margin:0px auto; }
#colIzquierda {
width:250px;
float:left; }
#colDerecha {
width:750px;
float:right; }
I have a problem when I fill for example #colDerecha with lots of content, and it overflows the height of the windows of my browser, then I can see something like this:
Where the dark grey = #principal, light grey = body, green = #colDerecha.
How can I make #principal gain the same height as #colDerecha always, when #colDerecha content is bigger than the screen size?
I donĀ“t know if I explain myself enough...
Please some ideas? I have tried adding height:100% to both #colIzquierda and #colDerecha, but does not do what I want. It overflows the same, but in other way...
A common approach would be to change the display of the parent element, #principal, to table, then set the display of the children elements to table-cell. In doing so, #colIzquierda and #colDerecha will fill the remaining space.
Example Here
#principal {
width:100%;
height:100%;
background:gray;
display:table;
}
#colIzquierda {
width:25%;
display:table-cell;
}
#colDerecha {
width:75%;
display:table-cell;
background:gold;
}
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
<div style="clear: both;"></div>
</div>
Why use the PHP tag in your question ?
Im trying to create a header of a website that has the logo left aligned, a navigation div that is 960px wide and centered and a log in area that is right aligned.
Here is a screen shot of my progress
The issue is that the login breaks to a new line and I don't know how to prevent it. Floating the elements doesn't work.
Here is a Fiddle
But it doesnt produce the same results I'm seeing when I run it locally.
HTML
<div id="header"><!-- Outside Container, Holds Logo and Log In -->
<div id="logoHolder">
<p>logo</p>
</div>
<div id="navigation">
<p>navigation</p>
</div>
<div id="loginHolder">
<p>login</p>
</div>
</div>
CSS
/*Header Options*/
#header{
width:100%;
background-color:green;
height:125px;
}
#logoHolder{
float:left;
}
#navigation{
width:960px;
background-color:blue;
margin-left:auto;
margin-right:auto;
}
#loginHolder{
float:right;
}
Just re-order your HTML to the following (move loginHolder above navigation) and it works fine:
<div id="header">
<!-- Outside Container, Holds Logo and Log In -->
<div id="logoHolder">
<p>logo</p>
</div>
<div id="loginHolder">
<p>login</p>
</div>
<div id="navigation">
<p>navigation</p>
</div>
</div>
jsFiddle example
You've got to be careful with widths. The navigation width is overwhelming the other divs. And, if I'm not mistaken, div has a built in line break. the answer above has one solution, I played with a couple edits also: you can copy in this css:
/Header Options/
header {
width:100%;
background-color:green;
height:125px;
}
logoHolder {
width: 100px;
background-color: red;
float:left;
}
navigation {
width:344px;
background-color:blue;
float:left;
}
loginHolder {
width:100px;
background-color:yellow;
float:left;
}
I'm a noob, trying everyday to learn more about CSS (even though I'm clumsy and "not a natural", my brain steams out like an old computer). I want to find out how to code a set of independent modules which share the same style and are displayed inline in two rows of two columns. I want to recreate a paper stack for each module, using z-index and absolute positioning for it.
I made this image to show what I'm looking for:
I tried display:inline for the top div - but this way, I had to code individual overlapped divs for each module, using position:absolute and coordinates. What would be most desirable is that a single module+overlap could be repeated, using the same class (without having to change each module's overlapped div coordinates).
Does anyone have an idea about how to do this using CSS? Thank you in advance :)
Yes, you could do the following. You'll want to resize to whichever dimensions serve you best. JSfiddle here: http://jsfiddle.net/CNPJ9/2/
<div class="contain">
<div class="box">
<h1>A</h1>
</div>
<div class="behind"></div>
</div>
<div class="contain">
<div class="box">
<h1>B</h1>
</div>
<div class="behind"></div>
</div>
<div class="contain">
<div class="box">
<h1>C</h1>
</div>
<div class="behind"></div>
</div>
<div class="contain">
<div class="box">
<h1>D</h1>
</div>
<div class="behind"></div>
</div>
.contain {
margin:25px 25px;
float:left;
}
.box h1 {
font: 8em normal Futura, sans-serif;
text-align:center;
color:#f1f1f1;
}
.box {
width:400px;
height:300px;
background:#000;
z-index:1;
float:left;
position:absbolute;
}
.behind {
width:350px;
height:325px;
margin-left:25px;
background:#333;
z-index:2;
}
Something like this may help you.
Fiddle
.abc{
width=300px;
height:200px;
margin:50px;
border:solid 2px black;
border-bottom: 5px double blue;
}
I have this kind of html code :
.content { background-color:#3C2B1B; overflow:auto;}
.menu { width:185px; float:left; background-color:#E2DED2; margin-top:10px; margin-left:10px; margin-bottom:10px; padding-left:10px; padding-right:10px;}
.main {width:675px; float:left; margin:10px;}
<div class="content">
<div class="menu">
Menu
</div>
<div class="main">
Main
</div>
</div>
It works nicely on IE and Chrome, but on Chrome, if I refresh the page quickly, sometimes the whole content div go hide.
If I remove overflow:auto; I get rid about this problem, but of course I lost the background color.
Is it a common issue? Or what? And how can I fix it?
P.S. Chrome version is 8.0.552.237
.content { background-color:#3C2B1B;}
.menu { width:185px; float:left; background-color:#E2DED2; margin-top:10px; margin-left:10px; margin-bottom:10px; padding-left:10px; padding-right:10px;}
.main {width:675px; float:left; margin:10px;}
.clear {clear:both}
<div class="content">
<div class="menu">
Menu
</div>
<div class="main">
Main
</div>
<div class='clear'></div>
</div>
This is a little trick i use when working with floating elements. adding the empty div with the clear both css will keep the .content div from collapsing
I hope it works for you :)
by setting css for div inner elements as
display:inline
i resolved this