set the width to 200 pixels (px):

Let's see how it looks in the browser.

Category: . 2 comments. Published: 09/02/2012.

Hello, today we will look at such an important element of the site as a block, and this article is inextricably linked with the article about block design in which we looked at how you can create both block containers and built-in elements for our site on the site. After studying this article, I am sure that we will become much clearer about how to work with blocks and this will be a very significant step towards creating our own website.

Block height and width in CSS.

Let's now look at the main functions that will help us manage the appearance and position of the site's blocks, and after that we will need to put all this knowledge into practice and we will create a simple framework for the site.

The height of a block in CSS is set using the command height: auto|<высота в единицах измерения>|inherit and as you already understood, we can set the height of the block using the auto command, we give the command to the browser that it itself can determine the size of the block and thus the block will be of such a size as to fit all the elements and no more.

The inherit command will allow you to borrow parameters from a parent element and these values ​​will only be visible if parameters have been set for the parent element. But most often you need to set the block size specifically, just specify the size in one of the accepted values ​​(most often these are pixels).

We can also set the size relative to the parent element and for this we need to use percentages. Let's see how this looks in practice.

This command tells the browser that a specific element on the page should be set to a size of ten percent of the size of the parent block.

The width of a block in CSS is set using the width parameter: auto|<ширина>|inherit all parameters are the same for both the height and width of the block and I think there is no point in repeating it again. I just want to say that it is not necessary to specifically set both the height and width of the block; you can set, for example, the width and the height will increase depending on the content, which is very convenient if you don’t know what content will be on a specific page.

Minimum and maximum block width.

Also, for each block, we can set not specific parameters, but the minimum and maximum parameters for any block on the site. Thanks to this, you can fill blocks without fear that they will go beyond the browser window.

To set this is very simple, we need to set the following parameters to set the minimum width and height:

min-width:<ширина>

min-height:<высота>

And for the maximum, two parameters are needed:

max-width:<ширина>
max-height:<высота>

Now we can set both the maximum and minimum size for a block or for the entire site, and this is important for a site with a rubber design; if it is fixed, this parameter will not work.

Options for float placement in css.

In all the previous examples where we created containers and elements are placed one after another in order, but this is not enough for us to create a design, we need the ability to place elements at our discretion and the property will help us with this float in css and now we will analyze the application of this property in practice.

The float parameter can take several values, and now we will figure out what these parameters are:

float: left|right|none|inherit

Now let's look at each example separately.

The float: left command means that the block should be aligned to the left and all other elements will flow around it to the right.

float:right is the exact opposite of the previous command and, accordingly, the block will be aligned to the right and all elements will flow around it to the left.

float:none is the default behavior for each block, placing the blocks one after the other. The use of this parameter is not relevant now and it is used very rarely and rather simply out of illiteracy.

Clear parameter in css.

Very often, when creating a design on blocks using the float command, you need to give some blocks a command so that they do not flow around the block but behave as usual, being placed below all the others. This problem was previously solved using the float:none command to the desired block, but the display in each browser may be different and therefore in such cases it is much more rational to use the clear command and now we will see how this can be done.

clear: left|right|both|none|inherit

The command has four parameters, and now we’ll figure out exactly what functions it performs with each one.

The clear: left command means that the element is placed below all elements with the float: left parameter.

The clear:right command places a block below all elements with float: right.

The clear:both parameter places the element below all blocks with both float: left and float: right parameters.

clear:none is normal behavior for a block. This parameter should not be specified if floating containers have been placed before.

We apply all knowledge in practice.

So we have come to the conclusion of the article in which we need to see how we can apply all this in practice and the first thing we will do is create a simple framework for the site. This is what our frame will look like.

As we can see, for the wireframe we will need to create four DIV blocks and to them we will need to apply both size parameters and placement parameters.

We have created four blocks and now we need to fill them with information and set the background for each block so that we can see which block is located and where. You can find out about setting the background. And this is what kind of code we should have.

After this, we need to go to the style file and write down all the commands we need. The commands are all the same for all blocks, only each one has its own parameters.

Header(width:500px; block width
height:100px; block height
background-color:#33CCFF;) block color

Content(width:400px; block width
height:400px; block height
background-color: #33FF33; block color
float: left;) block position

Sidebar(width:100px; block width
height:400px; block height
background-color: #CCCCCC; block color
float:left;) block position

Footer(width:500px; block width
height:100px; block height
background-color: #0000FF; block color
clear:both;) standard block position

And after we write all these commands, we will get such a framework for the site.

It is known that a web designer draws a website layout, and a layout designer does the layout, that is, writes HTML/CSS code. And what exactly does he write on HTML page? All design layout elements are placed in blocks.

If we look at the source code, we will see that there are a lot of divs and they are all filled with design fragments. The whole drawing was scattered like a mosaic into its cells.

In order for all the design fragments not to go anywhere, but to be clearly recorded in their blocks, as they were drawn by the designer. It is necessary to know well how they behave blocks in height and width.

Let's look at the example of a block div, let's do it HTML markings.

Behavior of blocks in height

An empty block is not visible on the page, and to make it visible, you need to set its height or insert content inside it.

Body (
background: #d5d5d5;
}

Div (
background: #d56287;
height: 100px;
}

Let's give it a height of 100 pixels and a background color so that the page background and the block are of different colors, otherwise we won't see anything.

Behavior of content blocks

Removing the height height and paste the text inside the block.

Div (
background: #d56287;
}

We see that the block height changes, it depends on the amount of content. Why is this happening? By default, the block height is equal to the value auto, that is, it automatically adjusts to the height of the occupied content in the parent block.

Block priorities

Let's return the block height back to 100 pixels and insert a paragraph with text. While there is not enough text, the block actually occupies a height of 100 pixels on the page. Let's add more text and see that the block ignored the given height and took the height that the text required. The rigidly set height still gave way to the content.

Is there really no way to force the block to maintain a given height and not stretch along with the content? It is possible, but only due to automatic cropping of text that exceeds the specified dimensions, this property is called overflow.

Hiding unnecessary content in a block

Must be added to CSS code property overflow: hidden

Div (
background: #d56287;
height: 100px;
overflow: hidden;
}

everything that does not fit in the block will be hidden, we see how ugly the text was cut off.

If you need to display the entire contents of the block, you can use scrolling, then you should write to the block instead of hidden.

Overflow: scroll;

In practice, this can be useful for alignment, so that all blocks standing in a row have the same height or so that dynamically displayed content does not break the site design.

Block width behavior

How do blocks behave if you don’t set a width for them? We did not set the width of the block, but still its width automatically takes up all the space allocated to it. The default block width is 100%. But if we limit the width by setting, for example, 200 pixels, we will visually see that the block occupies 200 pixels.

Div (
background: #d56287;
height: 100px;
width: 200px;
}

However, there is a catch here, if we hover over the element in the Code Inspector, we will see that in fact the block continues to occupy the entire width of the browser, but does so in secret. Thus, it occupies 200 pixels openly, and the rest of the space is reserved and does not allow other elements to line up with it.

Let's duplicate our block and see that the second block is placed on a new line and also takes up the entire line. This is a feature of block elements.

So how can you get them to stand in one row? You need to make them inline-block elements and then they will perfectly stand next to each other on the same line. Each block needs to be given a property.

Display: inline-block;

The height and width of the block can be specified in relative units, for example in %. It should be taken into account that the sizes of child blocks are set relative to the parent and then the parent for the block div will body.

Mine will help you move from theory to practice and create your first website.

When laying out the next project (or just designing a layout grid), many were faced with a dilemma - to use a fixed layout width or a “rubber” grid that adapts to the size of the browser window.

Each of these solutions has its own pros and cons; I want to focus on the minuses, since usually it is precisely in reflecting the minuses of these decisions that one has to choose between two evils.

Fixed layout grid width

The layout is forced into a horizontal dimension of 960-980 pixels (so that everything is included on most devices in most resolutions), which with large horizontal window sizes looks somehow chilly - a thin vertical strip of useful page content and huge useless fields of unused space on the sides.

“Rubber” layout grid across the width of the window

Again, with large horizontal window sizes, there is another problem: the lines of text become very long, and reading them becomes not at all as comfortable as we would like.
Another common problem with this solution is that the side margins with large horizontal window sizes are no longer visually consistent with the horizontal dimensions of the elements, which also does not add comfort when looking at the layout.

I would like to propose a simple solution - limit the minimum horizontal size to a fixed value in pixels, and make the maximum relative as a percentage of the window width. This is very trivially solved by simple means of 2 more versions of the CSS specification.

Update: I would like to make a reservation that we are not talking about the classic rubber effect and adaptation to absolutely all resolutions, but rather only about a certain reasonable range of resolutions for which the layout is designed. In the examples below, this is the classic desktop resolution range with a horizontal resolution size of 1024 pixels.

Let me emphasize again: The post is not talking about a solution for all types of devices and all resolution ranges. This problem cannot be solved in principle within the framework of one layout., to solve it one way or another will require several layouts. Flies separately, cutlets separately.

Create a layout container:
...


We decorate it with simple style code:
div.page-container ( min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; )
However, this solution may seem insufficient to some due to the fact that with very large horizontal window sizes, problems with line lengths again appear. This can be solved with an equally simple additional technique: creating an additional outer container inside the one already described and limiting its maximum width to a fixed value (subjectively, it seems to me that values ​​in the range of 1400-1600 pixels are best suited). Again, we use only CSS 2.0 tools. This solution, instead of simply adding the width as a percentage for the original container as proposed in the first comment, will also work in IE, which, up to version 9, does not understand simultaneous indication of values.

Adding HTML:
...

And change the CSS a little:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 auto; padding: 0;
As you can see, the solution is extremely simple and quite universal; it can be used for any block elements.

This lengthy tutorial article will be devoted to important topics, the task of which is to sort out the methods of working with block elements, explain to the reader why changing the model for calculating the width and height of elements is used, how to manage overflow of block elements, and how to work with minimal and maximum element sizes.

While learning about the CSS box model, we learned that the width and height properties set the width and height of the element's interior area ( content area), which can contain text, images and other elements.

In the CSS box model, there is a difference between the width and height values ​​you give an element and the amount of space the browser reserves to display it. The total width and height of elements represents the area of ​​the browser window that consists of the width and height of padding, borders, and custom values ​​specified for them.

The total width of the element is calculated using the formula:

div(width: 150px; /* set the width of the element */ height: 150px; /* set the height of the element */ padding: 10px; /* set the internal padding of the element */ border: 5px; /* set the borders of the element */ }

In our case, this saves the situation, and we do not have to make any calculations, and in the future we are afraid of any changes that may be required for our elements. Let's leave these unnecessary calculations on the browser side and look at the result of our example:

To fully understand this model for calculating the width and height of elements, let’s consolidate our knowledge with the following example:

The value of the content-box property is the default value and calculates the total width and height of the element according to the classical scheme. Using width as an example:

150px (custom width) + 10px (left padding) + 10px (right padding) + 10px (left border) + 10px (right border) = 190px.

As for the second element to which we applied the border-box property, the element's custom width and height already include the element's content, border, and padding. In most cases, using a property with the value border-box is preferable on pages, as it makes the final dimensions of the element obvious and avoids some of the unforeseen situations discussed above.

The result of our example:

Controlling block element overflow

During the layout process, you will encounter situations where the content of an element will be displayed outside the borders of the element. By default, the browser displays this content (element overflow is rendered), which in some cases leads to visual errors. The overflow CSS property is responsible for this browser behavior. Let's consider its possible values:

Let's look at the following example:

In this example we placed four blocks of fixed width and height, for which different values ​​of the CSS property overflow were specified:

• First block(visible value) – content extends beyond the boundaries of the element (default value).
• Second block(value hidden ) – content that overflows the element is trimmed.
• Third block(scroll value) – The overflow is trimmed but a scrollbar is added.
• Fourth block(auto value) – as with the scroll value, only a scroll bar will be added automatically if the block overflows along a certain axis ( x- horizontal, or y- vertical) and is not displayed permanently on the page.

The result of our example.