CSS div positioning (original state) - css

I'm trying to make a basic system but stying has to be done with divs.
The thing is, I'm always messing my div styling when I do it myself. Like, a div goes out of container div and things like that.
What I'm trying to archieve is very basic.
There should be a 800x800 container div.
The first 200px height and 600px width should contain a new div named
description.
200px width on right side should be a new div named logo.
There should be another div here, 200px height and 800px width.
In the bottom, we got 400px height and 800px width to use. I want to
make it something like this: (all 400px) height.
From left to right;
100px - a div named block (contains a block image) 150px - a div named item-1. 100px - a div named block (contains a block image) 150px - a div named item-2. 100px - a div named block (contains a block image) 150px - a div named item-3. 100px - a div named block (contains a block image)
Could anybody help me in this case? A little example will get my going.
Thank you.

The following code should help you. Your total width goes out of 800px so I have increased the width to 850px.
<body>
<div style="width:850px; margin:0 auto;">
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="height:400px; width:150px; float:left" name="item-1"></div>
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="height:400px; width:150px; float:left" name="item-2"></div>
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="height:400px; width:150px; float:left" name="item-3"></div>
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="clear:both"></div>
</div>
</body>

First, most people here don't take kindly to being asked to do your work for you, which is basically what you're asking here. You'll be far better off trying what you're looking to do, then coming back here with specific questions.
That said, I'm going to instead try to help you with the issue that lies underneath your stated question, given the notes within your post.
It sounds to me like you don't have a good understanding of floats, and how they affect HTML elements (and their parent elements). CSS-Tricks has a phenomenal article on floats. In short, applying float to an element takes it out of the normal flow of HTML documents and allows you to align block-level elements next to one another. Issues arise when all child elements of a container are floated, which makes the parent container collapse on itself. This collapsing effect can also happen when one child element is floated, but another one isn't, and the non-floated element takes up less vertical space than the floated one. In that situation, the parent "collapses" to that smaller childe element, leaving the larger floated one overflowing the parent. Once you understand how floats (and float clearing) work, your life will be a lot easier.
Additionally, you might also want to look into display: inline-block;, which can solve a number of headaches with things like horizontal navigation.
Edit From the looks of the site you linked, another one of your issues is that you're trying to fix the height of your container elements, then making the child elements total height add up to more than the parent. For that, I refer you back to CSS-Tricks, for information on the CSS box model.
In short, though, if you have a box that's 2 feet tall, and inside it you stack two more boxes, one that is 1 foot tall, and one that is 1.5 feet tall, then the inside boxes will stick out of the container, because their height adds up to more than the height of the container. The same concept applies to web design, especially when you're using fixed sizes.

Related

Position DIVs in same place, toggle them

I'm having a little issue with couple of DIVs.
I need two DIVs to be positioned in exactly same place, and toggle them. As one div disappear, another should appear. This I will do using jQuery toggle().
The issue is that both DIVs should be part of the page flow and positioned exactly the same way. How I would achieve that?
So, there is some previous div, that occupies some place, has relative positioning and non-fixed sizes (dependent on window measures)
<div class="header">
... </div>
Then my div
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; ">
... </div>
and other my DIV
<div id="aboutDiv" >
This is ABOUT
</div>
Two later divs should occupy the same place. What positioning tags I could use?
The design adjusts to the window size due to flexible element -- very first DIV "header", so no absolute positioning is possible.
just put them one after another
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; "> ... </div>
<div id="aboutDiv" >
This is ABOUT
</div>
both should be positioned relative , when one is hidden then other will move up and they will be in the same place - as long as you are using toggle to always have one hidden and one shown
You either need a relatively positioned parent container with absolutely positioned children, or hide one and show the other when its faded out completely

Trouble positioning 2 DIVs inside a container DIV

I have a container (DIV4), which contains two other DIVs (DIV2 and DIV3) side-by-side. DIV4 is contained inside another DIV (DIV1). Some info about each DIV:
DIV1: position is absolute. It's essentially a pop-up window to view a larger version of the image when a thumbnail image is clicked. It is simply moved on-screen to make it appear, and off-screen when the link is clicked to close it. Since the content can vary, it has no fixed width or height.
DIV2: A series of nested DIVs, these contain the large image, and use the nested DIVs to generate a frame and matting for the image. The DIV with the image itself (as a background image) has a specified width and height; the outer DIVs (including DIV2) do not, they simply use their margin and border settings to fit around the DIV(s) contained inside them.
DIV3: Contains a series of P and INPUT tags, with BR tags to easily control their vertical positions.
DIV4: Has no attributes, simply used to group DIV2 and DIV3 separately from other content of DIV1 that follows below them.
Originally, I tried using float: left on DIV2 to bring DIV3 up next to it. However, I believe the problem is that DIV1 and DIV4 do not have a specified width, so the browser doesn't know if there's enough space to move DIV3 next to DIV2. In IE, it positioned DIV3 correctly, but Firefox dropped all of DIV3 below DIV2. So I looked for another solution besides floats. I was able to use display: inline-block on both DIV2 and DIV3. This puts them side by side in both browsers.
However, DIV3 is appearing vertically centered relative to DIV2. I want the top of DIV3 to be in line with the top of DIV2. I have read about using position: absolute (on DIV3 in this case) to force it to the top, and position: relative on their container (DIV4) but I would also have to specify a left position for DIV3, and since the width of DIV2 varies, that would be a problem.
I haven't posted any code because I'm not really sure which parts would be useful to see, and the entire content of the DIVs along with their CSS would be pages of code (some of the DIVs are written dynamically with PHP/MYSQL). Hopefully my description of the situation will be adequate.
Here's an image of how I want it to look: http://i46.tinypic.com/qstks1.gif
Once again, I think the main problem I am having with standard solutions of using floats or absolute positioning is that every DIV is variable in height and width. I almost have this solved with inline-blocks, except for the vertical positioning of DIV3 relative to DIV2.
EDIT: Per request, I put up some code on JSFiddle. However, the displayed result isn't at all like how it actually looks, which I knew would be the case. This code is included into another php file, which itself is included into the index.php. Most of the php variables are set in the index.php according to standard MVC practices. So it doesn't really work at all without access to all those other files, not to mention the MySQL database that it obtains the image filename from (and which it uses to determine the height and width of the image). http://jsfiddle.net/Technetium/GKUgY/
It won't let me submit this without putting code in-line for some reason (do they really want me to put that whole thing here?), so here's some bogus code just to let me edit the post... ignore this. $sense=false;
This is the entire imageviewer.php file, and the entire CSS file. In the original post I was simplifying the DIV names, so use this key: DIV1 = imageviewer (it's created in an echo statement, so you won't find it under the usual DIV tag color), DIV2 = black_frame, DIV3 = right_of_image, and DIV4 = image_plus_prints. The stuff at the bottom is all in a DIV of its own called simply below_image.
You might want to have a look at Matthew's 3 column liquid layout, might well be up your street; as other posters have pointed out we can't fix the problem if you don't post your code.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I made a JSFiddle that I think should work for your situation.
(nevermind. The DIV2 and DIV3 do not stay side-by-side if the window is repositioned.. yet.. I'm trying to work on that now. I think it has to do with how the DIV1 has no size set, so it resizes itself, which makes the other divs move around)
I used an additional div inside of DIV4 called DIV5 and set clear:both so it would fall below both of DIV2 and DIV3.
Also, read through this example of CSS positioning http://www.barelyfitz.com/screencast/html-training/css/positioning/
Try using static position with display inline/inline-block/block instead float. Reset basic tags - html and body - to clear browser defaults and include height:100%, so you can set height for it`s childs.
Tip: You can use inline-block with vertical-align.
Ex:
html, body{margin:0; padding:0; width:100%; height:100%; background:#eee;}
div{margin:0; padding:0; }
#div1{ margin:0 auto 0 auto; width:90%; height:100%; background:#fff; top:0; bottom:0; display:block; padding:10px 0; }
#div4{width:90%; height:80%; display:block; background:#eee; margin:0 auto 0 auto; padding:10px 0;}
#div2{ width:66%; margin-right:3%; height:auto; display:inline-block; border:#aeaeae solid 1px;}
#div3{ width:30%; height:auto; display:inline-block; border:#aeaeae solid 1px;}
<div id="div1"><!--full container -->
<div id="div4"> <!--principal -->
<h1>Content</h1>
<p>
Left floating and relative position are trouble. Use display:inline/inline-block/block instead.
</p>
<div id="div2"><!--content --> middle </div>
<div id="div3"> <!--right side--> aside </div>
</div>
other content
</div><!--close all -->

Floated block elements not to wrap when exceeding parent width

I would like to know if it is possible for block elements, floated in a direction, not to wrap when they exceed the width of the parent element.
That was the quick and short question, for a little more details and an example, please see below.
I have done some research about this and I have not found a definite answer of whether it is impossible or not and that is why I am looking for a definite answer here of whether this can be done or not.
And in the case that it is not possible, I would appreciate a quick explanation about it so that I can improve my understanding of how CSS works.
Please see the following example.
I have 1 "container" div and inside it I have 3 "row" divs. Let's say the "container" has a hypothetical width of 200px and each "row" has a hypothetical width 100px. These values are not specified in the css, they vary based on the content on the page.
Each "row" is floated to the left so that they appear horizontally.
<div class="container">
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
</div>
.row {
float: left;
}
In this case, when the total width of the "rows" exceeds the width of the "container", is it possible for the "rows" not to wrap and to remain in a single horizontal line ?
Just to emphasize, I cannot specify an exact width for the "container" in the css because I want the layout dynamic in order to accommodate different content.
Thank you.
The behaviour you're looking for can be achieved by replacing float: left with display: inline-block, and having white-space: nowrap on the parent container.
See this fiddle: http://jsfiddle.net/XYzea/1/
Blocks inside the container are aligned side by side (like float) but their parent has no width specified. By the way, the wrapper encloses nested divs. inline-block works in all modern browsers except IE<8 in which is not possible to use that display property with any hack if the element is a natural block element
The only way I can think of is to have the container > wrapper > rows. The container can be dynamic in size and have overflow:hidden while the wrapper will keep the rows in a single line

How to achieve Bottom Align floated div that sizes to it's container

How can I achieve the following layout? Specifically the positioning of Image and DIV
I've found that unless I set a specific width for the Div, it will just go on to the next line and take up the full width of the container. Additionally aligning it relative to the bottom of the image is giving me trouble. Currently they're both float:left
Edit: The two solutions so far work if the image is a constant width which I guess I could work with, but it's going in a Wordpress theme for an author's profile page and it's possible that images would have slightly variable widths. Is there a solution that would have the Div right next to the image (minus padding) regardless of how wide or narrow the image is? Basically having the div adjust its width to accommodate the image width.
Tested in IE7/8, Firefox, Chrome.
Live Demo #2
CSS:
#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}
JS/jQuery:
$('#header').css('margin-left', $('#top img').width() + 10);
(you might want to change the + 10 for parseInt($('#top img').css('margin-right'), 10))
HTML:
<div id="container">
<div id="top">
<img src="" />
<div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
</div>
<div id="content">dfgdfg</div>
</div>
I'd put the header image and header div inside its own container and position the items within it using absolute positioning.
I've put together a quick sample here: http://jsfiddle.net/JjxYj/1/
Notice here that if you remove the width of the Div in the header, it will become the width of its content.
Update
To answer the updated part of the question, here's another solution that'll allow the image to be of any width whilst still positioning the header text at the bottom of its containing item: http://jsfiddle.net/JjxYj/5/

CSS two column layout aligned-left?

I have a simple design. To the left is the navbar, to the right is the content div. I just did float left and float right and it works - unless the monitor is too wide. Then the navbar is far off to the left (like it should) but the content clings to the right. The middle is empty space. I want the content to cling next to the navbar on the left.
How can I accomplish this?
How about floating them both to the left and use percentage values to set their width..
Like below:
#sidebar,#content {float:left;}
#sidebar {width:25%;}
#content {width:75%}
Or if you want to fix the size of your sidebar and have the content fills the rest of the space you can do the following(I use it all the time):
HTML:
<div id="content"><div class="in">
CONTENT HERE
</div></div>
<div id="sidebar">
SIDEBAR HERE
</div>
CSS:
#content,#sidebar {float:left;}
#sidebar {width:300px; position:relative;/*so content won't cover it*/}
#content {width:100%; margin-right:-300px;/*sidebar's width*/}
#content .in {margin-right:300px;
/*sidebar's width or more for space between blocks*/}
There are lots of method to do that.
It depends :
if you want a fixed width layout, or a relative one.
if you want the layout to be centered or not.
etc.
A sketch of what you want or/and your actual code would help.
Anyway, if you're not aware of CSS layout, you could use a CSS framework like blueprint which is easy to use and takes care of your current problem by itself.

Resources