HTML/CSS - Creating 2 Column-Layout

C_O_R_E · 03/09/2015, 17:45

Hey guys,

presently, I'm looking through my code to find out my mistake in this column-Layout. All I want to do is, create a column-Layout, which is also working perfectly when I'm creating a new document. But I'm a bit inquisitive, 'cause I want to know where my mistake is hidden in currently document.

Could someone help me out? I just got the "tunnel" view and incompetent to find my own mistake right now.

Spoiler

CSS-File

Spoiler

Luuc' · 03/09/2015, 18:36

Wenn ich es jetzt richtig verstehe

Du könntest die Artikel in einen erneuten div "einschließen":

HTML Code:

<div class="content">
<article id="main">
    	<h2> Das Fahren mit den Cable Cars </h2>	
    		<p>San Francisco gehört zu den aufregendsten Städten auf unserem Planeten. 		               Bayside informiert Sie über alles, was diese pulsierende Metropole bietet:               hervorragende Sehenswürdigkeiten, Restaurants und Unterkunft für jeden               Geschmack und Geldbeutel sowie viele interessante Veranstaltungen </p>			              
    </article>
              
    <aside id="sidebar">
    	<h2> Cable Car Tips </h2>
        <p>San Francisco gehört zu den aufregendsten Städten auf unserem Planeten. 		               Bayside informiert Sie über alles, was diese pulsierende Metropole bietet:               hervorragende Sehenswürdigkeiten, Restaurants und Unterkunft für jeden               Geschmack und Geldbeutel sowie viele interessante Veranstaltungen </p>
    </aside>
</div>

dann könntest du das in CSS wiefolgt machen:

Code:

/* CSS Document */
.content {
    display: inline;
}

.content .main {
    float: left;
}

.content .sidebar {
    float: right;
}

Bin mir jetzt nicht richtig sicher ob das das ist, was du willst, habe es außerdem nicht getestet aber einfach mal ausprobieren!

C_O_R_E · 03/09/2015, 19:06

I reconstruate my website layout with Paint.

Red/blue area refers to main-container and sidebar-container.

I could fix it just like you did, but its not necessary to create a new container for it.
I want to know, why is it not working, what mistakes/thoughts are false here?

I mean, when I create a new document with just:

HTML Code:

<article ="main">

</article>

and

<aside ="sidebar">

</aside>

and also adding my css script to it, it works. Im just asking myself, why is it not working on these documents above, what is wrong?

But anyway, thanks alot for your response !

Luuc' · 03/09/2015, 20:46

Quote:
Originally Posted by C_O_R_E
I mean, when I create a new document with just:
HTML Code:
<article ="main">

</article>

and

<aside ="sidebar">

</aside>
and also adding my css script to it, it works. Im just asking myself, why is it not working on these documents, what is wrong?

But anyway, thanks alot for your response !

If it works like you said, where's the problem?

C_O_R_E · 03/09/2015, 22:35

The problem - as you can see above - is not working for the whole html document. It means, when I create a html document without wrapper-container, hero-container, footer etc. it works fine. But at the point, when im trying to implement it into my html structure it does not work out.
I'm missing something here and to be honest, I can see it at all.
Your solution to build around these containers an out-container (separate one) works - just like I did, before even asking on epvp. All in all its not a professional and common solution. I want to find/see the solution which is not based on a separate created container, 'cause it should be work with these containers without creating an extra container one.

German:

Wenn ich ein neues HTML Dokument anlege, es lediglich mit article id="spalteeins" und aside id="spaltezwei" konstruiere, funktioniert es.
Beide Container bilden somit Spalten und das Ergebnis ist ein 2-Spalten Layout.
Sobald ich es aber auf das HTML Dokument - siehe Thread - anwende, ändert sich nichts. Die zweite Spalte ist weiterhin unter der ersten Spalte.

Edit: // As I said it before, it's just a mistake which I scan and skim the code and didn't see my mistake.
After I took some rest I directly saw my mistake here.

Code:

#sidebar {
width: 35%;
margin-right: 2%;
[COLOR="Red"]float: right;[/COLOR]

}

Luuc' · 03/09/2015, 22:46

Warum sollte es nicht professionell sein? ^^ Wie man so schön sagt "Viele Wege führen nach Rom". Dort wird der eine ja wohl gleich gut sein wie der andere...

C_O_R_E · 03/09/2015, 22:53

Ich habe vergessen - nachträglich editiert - bei der zweiten Spalten zu floaten.
Da ich jahrelang in ASM und C++ programmiere (deshalb mag ich kompakte, kleinere Quellcodes und will den kürzesten Weg nach Rom

)
und ich Beschreibungssprachen wie HTML aus dem Weg gehe, zwinge ich mich hin und wieder einiges zu wiederholen, um mich in dem Gebiet fit zu halten.

Trotzdem danke

Adroxxx · 03/10/2015, 00:07

Well, ... no offense, but why in seven hells don't you use a grid?
It's 100% cleaner. Because what you're doing now is very unclean.

First you using semantic html tags, but then using id. But why? There is no need to use fix ids. Its so 1999.

Quick grid example:

Its so much cleaner, because you can style your page with things like rows and columns and it's a good start for responsiveness.

And you can reuse it for several different pages and easy change layouts, without rewritting everything.

Imagine on your 2nd page you want to change some layout or make more compley layouts. You will have to rewrite your id stuff.

Luuc' · 03/10/2015, 07:28

Na wenns jetzt geht ist ja alles gut ^^

C_O_R_E · 03/10/2015, 18:44

Quote:

Well, ... no offense, but why in seven hells don't you use a grid?

I definetly allow criticism, no matter the way you lay open your critic.

Quote:

First you using semantic html tags, but then using id.

To be honest, I clearly don't know the difference between semantic and non-semantiv html tags. Sorry. I didn't research well, which leads me to this pathetic code ( from a web developer point of view :/ ).

Quote:

Its so much cleaner, because you can style your page with things like rows and columns and it's a good start for responsiveness.]

Give me some time to read in the new stuff

Thank you too, for your response.

@Luuc'

I already know it, but nice to keep responding to help me out.

Luuc' · 03/10/2015, 18:59

Semantic: article, aside, ...
Non-Semantic: div, ...

Adroxxx · 03/10/2015, 19:29

Quote:

Originally Posted by C_O_R_E

To be honest, I clearly don't know the difference between semantic and non-semantiv html tags. Sorry. I didn't research well, which leads me to this pathetic code ( from a web developer point of view :/ ).

Well in the pre-html5 time you had only a very restricted pool of hmtl tags.
So websites looked mostly like this:

PHP Code:


			
div.id="header"

div.id="nav"

div.id="content"

div.class="main"

and so on.

But with HTML5, you got a lot more semantic tags, that describe the content of it.

Like

PHP Code:


			
<nav> <header> <article> <figure

and more.
So that are semantic tags. And there is no need to set an id for every tag you are using.

If it's something unique like the nav or header tag you can simply style the whole tag.

Well grids are no magic.
The idea is, that you have fix columns with a specific width, where you place the content. The width is in modern grids mostly percentage based. So the site get's responsive.

You can read up here a few basics

You can build your own grid, use generators or use some grids off the internet.

Or you can use frameworks like bootstrap or foundation.
They will give you a grid and a lot of ready to use elements, that are all styled.

To understand girds better, they just give you some helper classes that define colums.
So *attention a bad example incoming*

imagine the following, this is a simple 4 column grid:

PHP Code:


			
CSS:



body { width:100% }

container {width: 1900px}



column-1-4 {width: 475px; }

column-1-2 {width: 950px; }

column-2-3 {width: 633px; }

So now you have 4 columns which you can style your page.
You can make 4 x the column-1-4 which is the smallest.

So you would get 4 small columns in a row.

Or you can make 1 x column-1-2 and 2 x column-1-4

so you have 1 column for the content which is 1/2 of the whole width of the window and 2 smaller columns which have 1/4 of the width.

C_O_R_E · 03/11/2015, 11:07

I "tasted" the grid system and seems more comfortable for me.
Still some problems/misunderstandings, which I will fix in the following days. I can't spend more time on programming stuff , cause I have to prepare myself for my final exam at school.

Anyway, nice for your support. I will edit my post, when I made some progress.

Spoiler

Luuc' · 03/11/2015, 12:48

Never done a grid system (except for the bootstrap columns). Maybe I should try it too...

Adroxxx · 03/11/2015, 17:50

Well you should add a css reset,
and don't simply use the dirty grid system I've posted.

Normally you also have padding and margins for the containers.
So it looks better.

You can take a look into

or simply the bootstrap grid, which is also fine.