Frage aside und article nebeneinander

[Honos]

Hallo Leute,

ich habe seid Ewigkeiten mal wieder angefangen etwas mit HTML & CSS zu machen.
An der Seite habe ich eine kleine Infobox (aside) und daneben soll beispielsweise ein Blogeintrag erscheinen.

article{
    background-color: white;
    width: 1500px;
    border-style:solid;
    border-width:0.1em;
    border-radius:20px;
    margin:10px;
    padding:10px;
    }
    
nav{
    background-color: silver;
}
aside{
    background-color:lightskyblue;
    width: 200px;
    height:350px;
    right:0px;
    float:right;
    margin:10px;
    margin-left:20px;
    padding:10px;
    border-left-style:solid ;
    border-left-color: deepskyblue;
    border-left-width: 1.5em;
}

Soweit funktionier das auch ganz gut das einzige was mich stört ist das " width: 1500px; " Eigentlich würde ich ungern eine statische Größe reinmachen. Der Zeilenumbrauch funktioniert auch ohne Probleme, nur geht die Border hinter der Infobox weiter. Hat jemand eventuell eine bessere Idee?
MfG

 

[Aaron3219]

Ich kann mit der gegebenen Info zwar nur raten, aber width: 100%; max-width: 1500px; sollte (sofern ich das Problem verstanden habe) das Problem lösen.
Falls nicht, bitte ich um mehr Info, sprich: Link zur Seite oder genug Code, um das Beispiel selber nachzustellen.

 

[Sailor]

Mit diesen CSS Schnipseln kann man wenig anfangen... wie soll es denn aussehen, wenn es fertig ist?
Wie sieht der zugehörige HTML Code aus?

Eigentlich würde ich ungern eine statische Größe reinmachen.

... warum machst du es dann?

 

[Honos]

Geplant war es so, dass rechts die Infobox sein soll und mittig die Hauptartikel/Infos dazwischen sollte geringfügig platz sein.

Ich kann mit der gegebenen Info zwar nur raten, aber width: 100%; max-width: 1500px; sollte (sofern ich das Problem verstanden habe) das Problem lösen.
Falls nicht, bitte ich um mehr Info, sprich: Link zur Seite oder genug Code, um das Beispiel selber nachzustellen.

Joar das löst das Problem. Gibt es eigentlich eine Möglichkeit dass die die Border der linken Box (Hauptartikel) nur bis zur Infobox geht ohne eine feste Größe angeben zu müssen?

 

[Aaron3219]

Du könntest dir mal Flexboxen anschauen, jetzt mal unabhängig von deinem Problem... Ich sehe da nämlich nichts von einer Flexbox und für dein Vorhaben wäre die von massivem Vorteil. Damit kannst du so ziemlich 80-90% deiner kompletten Seite gestalten was Layouts angeht.

Gibt es eigentlich eine Möglichkeit dass die die Border der linken Box (Hauptartikel) nur bis zur Infobox geht ohne eine feste Größe angeben zu müssen?

Klar... Flexboxen
https://jsfiddle.net/sbenekzs/

 

[Sailor]

Gibt es eigentlich eine Möglichkeit...

Gibt es bestimmt - nur ohne deinen Code (HTML und CSS) zu sehen, kann man dir schlecht helfen...
Wenn du den Link/ Code nicht posten kannst oder willst, dann schau dir mal 'Flexbox' an
https://www.w3schools.com/css/css3_flexbox.asp

 

[Honos]

Die Methode ist mir bekannt. Nur damals hab ich meine Seite mittels div's gemacht und da wurde im Forum angemerkt, dass dies nicht mehr zeitgemäß ist und mit section, header etc. (HTML5-Tags) realisiert werden sollte.

 

[Sailor]

Die Methode ist mir bekannt

Und warum nutzt du sie dann nicht?
Es spielt überhaupt keine Rolle, ob es sich bei deinen Layout um div's oder HTML5 Tags wie section, header, footer, article.... handelt, die verhalten sich alle gleich!
Du hast einen Flex-Container (nenne ihn zB 'section') und in diesem Container deine Flex-Items (das können beliebige sein). Den Rest machst du dann mit den entsprechenden CSS Formatierungen.