I tried to make two sections to my structure, one is a top section and another is a body section.
I'm trying to make the mainbody divs break away from the top section. For some reason when I add the color purple to a main body div it's coloring in everything else!
I added overflow:hidden to the wrapper and it did something, am I on the right path?
You can see my example here.
Thats because you used floating elements and didn't clear after them. Add
.mainbody{clear:both;}
But why do you have .topsection{float:left;}? If mainbody has width: 100%, it does nothing.
And overflow:hidden did somethink because if you have a block element with some floating elements before him, and you set overflow different than visible to him, you are creating columns. So then mainbody wasn't under topsection.
Edit:
Even if you remove the nonsense .topsection{float:left;}, it won't work because topright and topleft are not cleared floating elements too. So you have to add .mainbody{clear:both;} too, or change your topsection into:
<div class="topsection">
<div class="topright">...</div>
<div class="topleft">...</div>
<div class="clear"></div>
</div>
And then
.clear{clear:both;}
Related
I'm sure this is some stupid CSS mistake, but in this template website I'm making, whenever I put more than one line of text in the content div, it misplaces the two background divs on either side of it. Here is the HTML and CSS:
http://pastebin.com/txmQzbx3
I have tried everything I can think of, but I don't know what could be wrong with it.
First, there's no such thing as float:center. If you remove that and change the position value for your content div from relative to absolute, then it works.
http://pastebin.com/B9tXgXYj
If you want to keep it fixed width then just add float: left to the content css
If you want to have it fluid then you'll want to take a look at using the display: table|table-row|table-cell css properties to do it
Try placing your backgroundright div above content div,
<div id="backgroundright">
</div>
<div id="content">
<p></p>
</div>
Hope this helps
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
Please see the fiddle below to see the code and result:
http://jsfiddle.net/jhacks/nnZWB/7/
I am trying to get two divs to float:right within their parent div that doesn't have a defined width. It works if I set a defined width, but as one of the children divs needs to have a variable width, I simply want the parent div to just stretch to fit the children divs. However, as you can see from the fiddle, they don't want to float horizontally for me.
I've tried adding a few different styles (e.g. overflow:hidden) but can't get it to work.
Any and all help is appreciated. Thanks!
If the problem you are refering to is within the div topProfile then you just need to add float: right to topName.
If this is not the problem then you might have to include an image to help represent how you would like your layout to look.
Move the topProfilePic div inside the topName div.
<div id="topName">
<div id="topProfilePic">
<div id="pic"></div>
</div>
<a class="topText" href="name.html">Your Name Here</a>
</div>
http://jsfiddle.net/nnZWB/8/
I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!
I'm having problems with the following (example) code. What I'm trying to achieve is the following: div#id1 is a container div. This contains a div with an optional image and a div for body text. Div#id2 is similar. Div#id3 is a container div for the menu. It should be located to the topleft of #container. Now in case there is an image in #id1 the div#id3 will be pushed down. This works in FF, Chrome, etc. It works in IE too but only with div#id1, as soon as I add div#id2 it seems IE uses it to clear the div#id1.
<div id="container" style="background:red;width:800px;min-height:500px;margin:0 auto;">
<div id="id1">
<div style="width:200px;float:left;"><!-- this div has optional content and therefore might or might not push the purple div down --></div>
<div style="background:yellow;width:600px;float:right;">This is the top right div</div>
</div>
<div id="id2">
<div style="background:green;width:600px;float:right;">This is the bottom right div</div>
</div>
<div id="id3">
<div style="background:purple;width:200px;">This should be the top left div but is not the case in IE</div>
</div>
Try the code above in both FF and IE and you'll see the difference. IE messes up. Then remove div#id2 and it's contents and try again. Here IE shows things just fine.
Any clues as to how to fix this?
Cheers,
Bartezz
The blank div seems to have a minimum height meant for containing text, which causes it to be pushed down -- in Fx empty divs are not shown at all, and don't save any space for content inside them, cause there isn't any. Try modifying the 2nd inside of #id1 and the div #id2's width to lower and you'll see that the purple div gets pushed up a line-height -- I'm guessing the widths cause them to get so close to each other, that IE (but not other browsers) doesn't know how to make room for it so it pushes it down.
Dunno if this fits with your ideas, but why don't you just have one left div, and one right div, and fit divs inside them?