I am trying to create simple web page in order to learn and wrap my head around responsive design. As an exercise I created the page with 3 divs inside page-wrap div. I have assigned percentage only to the first div yet second and third are also responsive as I change browser window. My code is here https://jsfiddle.net/1g01tbfL/1/ so I was hoping someone can take a look and try to explain what is happening here.
Thanks
Quite simply, this is not an issue of inheritance. Those elements are block level elements (<div>) which means that their auto width will expand and take up all the available room. That means it will essentially be responsive already 
.
But i didnt set up width to percentage. I only set margins of the first div
What i am trying to say is that as i am changing the size of my browser window text inside div is also adapting to div size which is responsive but i am confused what forces text to adapt when all i did is set margins to percentage
Please accept this constructively.
You seriously need to start your studies by reading a simple, basic book about HTML and CSS where you will learn the basic rules of coding a web page and the appropriate vocabulary.
At the moment, you are being confounded by the most basic of HTML behaviors.
Delete ALL of the margins and paddings in all three boxes. You will find that exactly the same behavior occurs.
By default, block containers, such as <div>s, expand to fill the available width of their parent containers (as shown by your colored borders).
Content, in this case paragraph text, will remain within its parent container unless forced out by some mechanism.
A well-written web page starts off as fluid (which yours is) - ie. the content adjusts freely to fit the width of the browser window. Responsive means adding media queries or other mechanisms to adapt the content/layout to different sized viewports - such as if you have fixed width objects or columns that need to shift locations at narrower widths. Try not to confuse fluid and responsive behaviors.
By the way, leading slash marks are not valid CSS comment marks. That’s a JavaScript thing.
//min-width: 800px;
Proper opening and closing CSS comment marks are
/* */
Please read a book or take a very basic course online. It will be time well spent.
Hi Ronpat
Thanks so much for response. I am now confused about following…I know that <body> tag is no block element… I have body that contains piece of text that is inside <p> tag. There is no css attached on any of it. So as I shrink the browser window text adjusts according to browser window size
What tag are you talking about?
That is normal behavior. I do not understand what is confusing.
I was referring to <body> tag
I do not know what you typed because I cannot see it either.
To include a tag in your sentence, but backtics around the tag, like this:
`<tag>` and it will remain visible.
To include a section of code from your web page, but backtics around the section of code by putting 3 backtics on one line alone, then your code, then 3 more backtics on one line alone. The code will remain visible and formatted. Like this:
```
selection of
code here
```
Please edit your previous post and add the backtics so the tag can be seen.
I just did above
Done.
Normally, the <body> tag is interpreted as a block element that fits the width of the browser window. Any content within the page, including text, is usually placed between the opening and closing body tags something like this:
<body>
<div class="outer">
<header>
<nav>
links here
</nav>
</header>
<section>
<h2>title that describes this section</h2>
<p>paragraph text</p>
</section>
<footer>
footer content
</footer>
</div>
</body>
or maybe this:
<body>
<p>some paragraph text</p>
</body>
One would NOT normally find something like this:
<body>
some text here.
</body>
It is certainly possible, but it is NOT the way HTML is normally structured.
.
I still do not understand what you find confusing. The behavior that you describe is very NORMAL. Text wraps to fit the width of a fluid box as the width of the browser window changes.
Is it possible that you misunderstand your source of information? Or perhaps I am misunderstanding the issue.
Ok let me ask you this maybe in a different way. In the example above would you say that page is responsive since the text will fit the screen of smaller devices.
What html tags need to be coded in percentages using css in order to make it responsive?
I would say that it is fluid, which means the text can wrap to fit small screens without using @media queries. Please re-read post #5. In particular:
The use of percent margins, for example, allows a horizontal margin to become narrower gradually (in proportion to the change in width) as the browser window (device width) becomes narrower. This is a fluid behavior.
It is unfortunate that responsive has become the catch-all word that includes fluid behaviors. A well-designed responsive site needs to based on a fluid design.
When to use percent units of measure for widths, padding, or margins depends on the layout of the containers on the page.
Your example does not need percent anything nor does it need media queries… it is nicely fluid from desktop to smartphone just as it is written.
In effect if you apply no styling at all to the page then the text in the page will fit the dimensions of the viewport no matter how big or small that viewport is.
e.g. If you open your browser wide the text will stretch all the way across and then as you slowly close your browser window smaller the text will wrap as required.
However this doesn’t mean it is responsive as such but that the layout is fluid. Responsive is more about using media queries to style layouts that look better depending on the available width.
Regarding mobile then your text will not be properly viewable on mobile unless you include the meta viewport tag. Without this tag the mobile will assume a width of 980px and just scale 980px to fit the viewport resulting in tiny unreadable text.
As Ron said you need to take some time to get up to speed on the basics as there is a lot to take in at first and looking through a few tutorials on basic css and then responsive design will allow things to become clearer.
Ok this is last question I swear…
Why does background image fills entire screen rather than just width of body tag…
body {
width: 500px;
background-image: url(“…/images/tile.jpg”);
}
You saved the best question for last
The W3C documentation says that a background applied to the <body> element is propagated up to the <html> element unless there is already a background applied to the <html> element.
http://www.w3.org/TR/css3-background/#special-backgrounds
That reference and a great explanation are found in a post by @PaulOB dated Apr 26, 2015, on the CSS Tricks web site about 3/4 of the way down the page.
https://css-tricks.com/html-vs-body-in-css/
Also, Paul mentions that he does not recommend using the <body> tag as a page wrapper and explains why.
Recommended reading
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.