So I have a simple <div class="main"> and I have a set of 6 smaller div's within. All of these smaller div's are set to float:left; as to create a little tiled list, however this messes with my auto height and seems to not 'count' as something in the div. Please could you help me either correct my code or let me know if there is a better way!
CODE:
HTML:
<div class="main">
<div class="service-items">
<div class="service-item">WEB DESIGN</div>
<div class="service-item">SEO</div>
<div class="service-item-right">WEB GUIDANCE</div>
<div class="service-item">GRAPHIC DESIGN</div>
<div class="service-item">BROCHURE DESIGN</div>
<div class="service-item-right">CONTACT ME!</div>
</div>
</div>
CSS:
.main {
width:930px;
height:auto;
margin-right:auto;
margin-left:auto;
font-family: 'Roboto Condensed', sans-serif;
padding:10px;
}
.service-items {
width:930px;
height:auto;
}
.service-item {
width:200px;
height:90px;
padding-top:90px;
margin-right:15px;
text-align:center;
font-family: 'Roboto Condensed', sans-serif;
font-size:150%;
background-color:#69F;
display:block;
}
Floated elements do indeed not add to the parents height. There are a bunch of clearfix-hacks to get around this in more complicated (namely, overflow hidden prevents other, overlapping elements like custom tooltips from being shown) cases.
In your case, a simple overflow: hidden should do the trick.
.service-items {
width:930px;
height:auto;
overflow: hidden; // Set this
}
Related
I have a CodePen here.
I am trying to allow the image extend outside of it's bootstrap container horizontally, up to the maximum width of the viewport and allow no horizontal scrolling. I am also trying to hide the vertical overflow.
I'm close but haven't quite figured it out. I've tried combinations overflow-y/x:hidden/visible but couldn't get there.
Any suggestions?
Check this code for example.
#container {
width:300px;
height: 60px;
overflow: hidden;
}
#modules {
height:90px; /* 40px - more place for scrollbar, is hidden under parent box */
padding:5px;
white-space:nowrap;
overflow-x: scroll;
overflow-y: hide;
-webkit-overflow-scrolling:touch;
}
.module {
display:inline-block;
width:50px;
height:50px;
line-height:50px;
text-align:center;
background:#ddd;
}
.module + .module {
margin-left:5px
}
<div id="container">
<div id="modules">
<div class="module">aaa</div>
<div class="module">bbb</div>
<div class="module">ccc</div>
<div class="module">ddd</div>
<div class="module">eee</div>
<div class="module">fff</div>
<div class="module">ggg</div>
<div class="module">hhh</div>
<div class="module">iii</div>
<div class="module">jjj</div>
<div class="module">kkk</div>
<div class="module">lll</div>
</div>
</div>
I am having an issue with my divs moving when the page is resized. If you look at the plunker you will see a Header with boxes below. If you resize the workspace by dragging the scroll bar to the left you will see how the page should be. I tried wrapping all items in 1 div named wrapper and tried both relative and absolute positioning with a min-width. I also did the same for body. After inspecting the page with firebug looks like the html tag should have sizing or positioning. That didn't work either (see below). I would like to be able to minimize my screen to 50% and maximize to 250% and keep the same initial layout as if my screen is at 95% based on the wrapper. Any ideas?
Here's plnkr
<html>
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative}
div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; }
<body>
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</div> <!--end wrapper -->
</body>
</html>
you could use percentage and fix min-wheight + set overflow to auto (looks like frameset .. not so nice actually)
Or you could try to relay on box-sizing and use vertical padding on percentage value(it will use parent's width as reference).
floatting pseudo can then, be used and will allow divs to grow taller instead showing a scrollbar.
. {
box-sizing:border-box;
}
.wrapper {
max-width:1300px;
margin:auto; /* ?*/
}
.wrapper #header ~ div {
border:double;
margin:0.4% 0.2%;
padding:5px;
}
#header, .right, .rightbottom {
overflow:hidden;
}
.left {
float:left;
width:30%;
}
.left:before {
content:'';
float:left;
padding-top:204.5%;
}
.right:before, .rightbottom:before {
content:'';
padding-top:30%;
float:left;
}
.wrapper #header ~ div.rightbottom {
border:solid 1px;
}
.rightbottom:before {
padding-top:60%;
}
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left">
</div>
<div class="right" >
<div class="gridStyle" data-ng-grid="gridOptions1">grid</div>
</div>
<div class="rightbottom">right bottom</div>
</div>
http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview
I'm not too sure of what kind of behavior you look for once there is real stuff in your pages.
If you want the header and the two divs to always have their own row, perhaps you could contain them each in divs that are set to width: 100%?
Hi im trying to set some divs inline and i dont know what else to do.
.menuboton{
display:inline;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
display:inline;
margin-right:4em;
}
There are two classes, first are 4 divs and the another is one div with an <img> inside. Those divs are inside another div:
#elmenu{
margin:auto;
margin-bottom:10px;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
}
This is my problem: the 4 divs always are slightly below the one with the <img> inside and cross over the container div (elmenu). For fix that I tried setting it display:inline-block and fix the problem of exceds the container limit but still below the one with <img> inside.
Here the html code:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="psds/logo.png" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
</div>
Pics:
Using display:inline;
Using display:inline-block;
I want all divs stay at the same level!
Some guess?
Place the Knowit image in left and the menu in right and edit widths accordingly.
HTML:
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.left{ float: left; width: 150px; }
.right { float: right; width: 150px; text-align:left; }
Edit on OP request:
To center object within div class use:
text-align:center;
to center align the div container use:
margin: 0 auto;
All this information can be found at http://w3schools.com/
You should try to use span instead of div. Also use float:left
vertical-align: middle on #elmenu should do the trick along with display: inline-block; on the logo and menu items.
first you should build your menu from a list or a nav tag.
Inline-block is a good idea, you can easily size and align your elements.
To build your menu you need:
inline-boxes
text-align:center.
line-height
float (just once)
First element (holding logo for instance) can float left.
set a line-height to size (min-)height of the nav bar.
here we come to this : http://jsfiddle.net/GCyrillus/CaR7a/
.menuboton {
display:inline-block;
padding:0.7em;
border-radius: 4px;
background-color: #093;
line-height:1.2em;
}
.menu {
float: left;/* logo */
}
#elmenu {
padding:0;
margin:0;
list-style-type:none;
line-height:48px;/* logo's height */
text-align:center;
border-top:1px solid black;
border-bottom:1px solid black;
}
a {
color:white;
text-decoration:none;
}
<ul id="elmenu">
<li class="menu" id="logo"><img id="imglogo" src="http://placehold.it/1&1" /></li>
<li class="menuboton">Inicio</li>
<li class="menuboton">Posts</li>
<li class="menuboton">Login</li>
<li class="menuboton">Usuario</li>
</ul>
I hope it is useful
Like my comment, the Css should like this
.menuboton{
float: left;
padding:0.7em;
border-radius: 4px;
background-color: #093;
}
.menu{
float: left;
margin-right:4em;
}
UPDATE:
HTML:
<div id="elmenu">
<div class="menu" id="logo"><img id="imglogo" src="http://www.winphoneviet.com/forum/data/avatars/l/35/35914.jpg?1370081753" /></div>
<div class="menuboton">Inicio</div>
<div class="menuboton">Posts</div>
<div class="menuboton">Login</div>
<div class="menuboton">Usuario</div>
<div style="clear: both;"></div>
</div>
This's Fiddle
I am currently designing a website . But in one of my parent div box_t,the child divs box_t1 and box_t2 goes outside the box_t.
Html:
<div id="main_container">
<div class="box_t">
<div class="box_t1">
<h2>Start</h2>
</div>
<div class="box_t2">
<div class="boxt21">
<h2>Name</h2>
</div>
<div class="boxt22">
Hi
</div>
</div>
</div>
</div>
CSS:
#main_container
{
width:960px;
margin:0 auto;
}
.box_t
{
padding:20px 14px 20px 15px;
color:#07337a;
overflow:hidden;
}
.box_t h2
{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
.box_t1
{
width:340px;
float:left;
}
.box_t2
{
float:left;
}
.box_t2
{
margin-left:255px;
}
.boxt21
{
float:left;
}
.boxt22
{
float:left;
}
Your child divs are not going outside the parent div, but what you see on dream waver is due to dream waver's style of displaying the html contents.
Check actual rendering of your code in browser
You should use clearfix for parent block.
There a lot of ways to do it set overflow:hidden or set at bottom element with clear: both empty block inside parent.
My fav way is:
// for modern browsers
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6-7 */
.clearfix {
zoom: 1;
}
Use it class on your parent div and that's it.
When ever you use the float for your div. Do remember to clear the float.The whole problem is that floated objects do not add to the height of the object the reside in properly. And hence child div appear to be outside of parent div.All we need to do is clear the float, and this entire problem goes away. Put this empty div AFTER your last floated object:
<div style="clear: both;"></div>
You need to clear your floats
<div id="main_container">
<div class="box_t">
<div class="box_t1">
<h2>Start</h2>
</div>
<div class="box_t2">
<div class="boxt21">
<h2>Name</h2>
</div>
<div class="boxt22">
Hi
</div>
</div>
</div>
There is a better way to do this, create a class called clearfix and add it to the br... well really you should even include a br... but there you go.
I would suggest using borders (style="border:1px solid red") on all the div while developing a layout, it helps to know where exactly the divs are positioned.
This helps developers who dont use Dreamweaver or other editing tools.
I've looked at so many posts on this I'm at a loss as to why its not working for me.
.firstCell
{
float:left;
width:40%;
text-align:right;
align:right;
border:1px solid white;
}
.cell
{
float:left;
width:auto;
align:left;
text-align:left;
border:1px solid white;
}
.newRow
{
clear:both;
width:100%;
}
.container
{
width:100%;
background-color:#DEEFF8;
margin:0px auto;
}
So, I basically have this:
<div class="container">
*Within this I have sections of like a form*
<div style="width:400px;border:1px solid black;">
<div class='firstCell'>File Name:</div>
<div class='cell'><html:text property="fileName" /></div>
<div class='cell' style='color:red;'>(Max 50 character)</div>
<div class='newRow'></div>
<div class='firstCell'>Copy Book Name:</div>
<div class='cell'><html:text property="copyBookName"/></div>
<div class='newRow'></div>
<div class='firstCell'><html:button property="populateFields" value="Populate Fields" onclick="showFields();"/></div>
<div class='newRow'></div>
<div class='newRow'></div>
</div>
*So this is one section, what I would like to happen is to position my form elements in this and then have it all be centered on the main div
</div>
Your main .container has 100% width, it doesn't matter if you center it, it will still start drawing it from the very left. The div inside of it that's responsible for the left-aligned box has no id/class, and you're doing no aligning on it. Technically your main container is centered, but everything inside of it is left-aligned.
Do you mean like this? http://jsfiddle.net/36ujG/
It's a little hard to understand what you are trying to center. All I did was added margin: 0 auto to the child div of container.