I have a div in that div there are two other div. One has got to be on the left side and the other must be in the center but is with margin 0 when i check
<div class="row">
<!-- START LOGO -->
<div id="logo" class="span3">..</div>
</div>
<!-- END LOGO -->
<!-- START MENU - TOPBAR -->
<div id="nav-topbar" class="span9">...</div>
</div>
and this is the css
.row{
width:100%;
}
.span3{
float:left;
position:absolute;
width 270px;
}
.span9{
margin-left:auto;
margin-right:auto;
width:870px;
}
HTML
<div class="row">
<!-- START LOGO -->
<div id="logo" class="span3">..</div>
<!-- END LOGO -->
<!-- START MENU - TOPBAR -->
<div id="nav-topbar" class="span9">...</div>
<!-- END TOPBAR -->
</div>
CSS
Note: I have added black borders so you can see the outline of the divs.
.row{
width:100%;
}
.span3{
border:1px solid black;
float:left;
width:270px;
}
.span9{
border:1px solid black;
left:50%;
margin-left:-435px;
position:absolute;
width:870px;
}
Related
I'm trying to get navigation bar of height 40px on the top which I've now, Also I position:fixed; the only problem is, everything what I put inside the divs he showing up to the right and not at the center which I want, the navigation bar need to be 100%
JS Fiddle
this is my .css code:
.container{
height:auto;
margin-top:-10px;
margin-left:-7px;
}
/*========================= TOP HEADER =========================*/
.banner{
margin: 0pt auto;
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
position:fixed;
position: absolute;
}
.banner-container{
height:40px;
background-image:url('http://i.imgur.com/WoVWvmy.png');
background-size:40px 30px;
background-repeat:no-repeat;
position:center;
text-align:center;
}
These divs I use in index.php
<div class="container">
<div class="banner">
<div class="banner-container">
</div> <!-- END BANNER-CONTAINER -->
</div> <!-- END BANNER -->
</div> <!-- END CONTAINER -->
I restructured a little bit. Please see: JS Fiddle
HTML
<div class="banner">
<div class="banner-container"></div>
<!-- END BANNER-CONTAINER -->
</div>
<!-- END BANNER -->
CSS
body {
margin: 0;
}
/*========================= TOP HEADER =========================*/
.banner {
margin: 0pt auto;
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
position:fixed;
}
Here's your best bet.
Note I changed the HTML to use an img tag. It's easier to center these, and to manage them in general, than to do the same with CSS backgrounds:
<div class="container">
<div class="banner">
<img src="http://i.imgur.com/WoVWvmy.png" class="banner-container" />
</div> <!-- END BANNER -->
</div> <!-- END CONTAINER -->
CSS:
.container{
height:auto;
}
/*========================= TOP HEADER =========================*/
.banner{
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
text-align: center;
}
I wanted to fit this image (galeria.jpg) to the window but It adds scrolling panel at the bottom and the border over the menu. It shouldn't go like this...
HTML CODE:
<body>
<div class="tlo">
<div class="logo">
<img src="logo.jpg" />
</div>
</div>
<div class="galeria" >
<img src="galeria.jpg" />
</div>
<div class="menu">
<ul>
<li>STRONA GŁÓWNA</li>
<li>KONTAKT I LOKALIZACJA</li>
<li>ZAKRES CZYNNOŚCI NOTARIUSZA</li>
<li>OPŁATY W KANCELARII</li>
<li>PRZYDATNE INFORMACJE</li>
</ul>
</div>
</body>
CSS:
body {
background-color:#ffffff;
padding:0px;
margin:0px;
}
.logo{
position:absolute;
margin-left:-400px;
left:50%;
}
.tlo{
height:230px;
width:100%;
background: #e0e0e0;
}
.galeria{
width:100%;
}
JSFiddle: http://jsfiddle.net/SfG3A/
Try this
.galeria img{
width:100%; // Remove this and add below style
max-width:100%;
vertical-align:bottom; // to remove the white space below the image
}
When you give width 100% it takes the width of the image and when you give max-width it restricts the image to have the maximum width of its parent element.
You can add a overflow-x: hidden to the div who contain the galleria.jpg
http://jsfiddle.net/SfG3A/1/
Been racking my brains over this for a while now without any luck. I have a page made of two columns. the left column floats left, and the right column floats right. Inside each column are two divs that are meant to sit one above the other. In the right column they appear to do this fine, with a form above and a div underneath as it should be, but in the left column the lower div overlaps the bottom of the upper div by something like 15px or so.
Heres the index.php:
<!-- wraps entired contents of website below header -->
<div id="mainWrap">
<div id="leftColumn">
<!-- module for most recent posts -->
<article id="recentPosts">
<h1>Recent Submissions</h1>
<section id="recentPostsContent">
<p>upper right div content</p>
</section>
</article><!-- close recentPosts -->
<!-- Pagination -->
<div id="pagination">
<p>lower left div content</p>
</div>
<!-- end pagination -->
</div><!-- close left column -->
<div id="rightColumn">
<!-- Search bar -->
<form id="searchForm" action="search.php" method="post">
<input class="navSearchInput" type="text" name="searchInput" placeholder="search here.."/>
<input class="navButtonSearch" type="submit" name="submitSearch" value="Search" />
</form>
<!--end search bar -->
<!-- randomly generated image linking to a post -->
<article id="randomPost">
<h1>Hightlighted Post</h1>
<section id="randomPostContent">
<p>content</p>
</section>
</article><!-- close randomPost -->
</div><!-- close right column -->
<div style="clear:both;"></div><!-- clears floating columns -->
</div><!-- close mainWrap -->
and the related css:
#mainWrap{
margin:0 auto;
width:980px;
min-height:700px;
margin-top:20px;
}
#leftColumn{ border:1px solid green;width:700px;float:left;margin:0 0px 0 0;min-height:500px;}
#recentPosts{width:700px;height:310px;}
#recentPostsContent{
width:700px;
height:300px;
border:1px solid #dfdfdf;
border-radius:0 0 3px 3px;
margin:0 0 20px 0;
}
#recentPosts h1{
width:652px;
}
#pagination{
width:700px;
height:40px;
border:1px solid #dfdfdf;
border-radius:0 0 3px 3px;
}
#rightColumn{border:1px solid green;width:254px;float:right;min-height:500px;}
#randomPost h1{width:205px;}
#randomPost{
width:250px;
height:310px;
}
#randomPostContent{
width:253px;
height:300px;
border:1px solid #dfdfdf;
border-radius:0 0 3px 3px;
}
Why is the lower div overlapping like it is?
Here is a link to the webpage in question: www.chrismepham.com/sites/newmjbox/index.php
The problem is that you've explicitly set the height of #recentPosts to 310px, which causes the height to be capped. If you remove this, it should behave normally.
The real height of #recentPosts is more than the one you set in your CSS (310px). This causes the strange behaviour on #pagination
I have two css classes. One is supposed to hold images of text on the left side of the page and the other is supposed to hold a form on the right side of the page. For some reason, when I increase the padding to try to lower the text images on the left side of the page, the form on the right side also goes down. How can I fix it so that I can adjust the padding on both the classes independantly. Here is the css:
.header { background:url(images/slider_bgpng200.png) top repeat-x; padding:0; margin:0 auto; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.formbox{float: right;}
.logo { float:left; padding:0; margin:0; width:242px;}
.slider { background: transparent; margin:0 auto; padding:0; height:383px;}
.slider .gallery { margin:0 auto; width:980px; height:383px; padding:0;}
.slider .textholder {padding-top: 100px;}
And here is how it appears in the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="logo"><img src="logo.png" width="242" height="94" border="0" alt="logo" />
</div>
<div class="slider">
<div class="gallery">
<div class="textholder"> <img src="images/textimg.png"></div>
<div class="formbox">Form is here </div>
</div>
</div>
</div>
</div>
Thanks. The website is up at avidest.com/schneer.
Add a float:left to the textholder.
.slider .textholder {float:left;padding-top: 100px;}
I also recommend using a inspecting tool to see what is actually happening. In this case you would have noticed that the textholder is a block-element that uses the full width of the container.
I have this code
<!-- <body> (automatically added by jsFiddle) -->
<header id="header">
<h1>Title</h1>
</header>
<div id="mainContent">
Some text. End.<br />
</div>
<!-- </body> -->
How can I stretch #mainContent to fill all the available space below #header ?
That's for a Windows 8 app, so I can use CSS 3 (including -ms-grid-*) and JavaScript without worrying about browser support!
You can use display:table property for this:
HTML
<div class="parent">
<header id="header">
<h1>Title</h1>
</header>
<div id="mainContent">
Some text. End.<br />
</div>
</div>
CSS
body,html{
height:100%;
}
.parent{
display:table;
height:100%;
box-sizing:border-box;
width:100%
}
#header, #mainContent {
background:red;
display:table-row;
}
/* How can I make #header to fill the full available left space */
#header {
height:10%;
background:green;
}
Check this http://jsfiddle.net/cD2RK/3/